API

Table of contents

Functions

• TransitionGroup
• useAnimation
• useAnimationFunction
• useTransitionAnimation
• useScrollTimeline
• useViewTimeline

Interfaces

• TypedKeyframeEffectOptions
• TransitionGroupProps
• BaseAnimationHandle
• AnimationHandle
• AnimationFunctionHandle
• AnimationFunctionOptions
• TransitionAnimationHandle
• TransitionAnimationOptions
• ScrollTimelineOpts
• ViewTimelineOpts
• AnimationOptions
• TimelineDefinition

Type Aliases

• TypedKeyframe
• TypedEasing
• GetKeyframeFunction
• AnimatableCSSProperties
• PlayOptions
• WaitingAnimationEventName
• PlayOptionsWithArgs
• ComputedTimingContext
• AnimationFunction
• TransitionAnimationDefinition
• AnimationDefinition
• ScrollTimelineAxis
• ViewTimelineInset

Functions

TransitionGroup

▸ TransitionGroup(«destructured»): ReactElement<any, string | JSXElementConstructor<any>>

A component to manage enter/update/exit of its children by key, that works similar to TransitionGroup of react-transition-group.

Parameters

Name	Type
«destructured»	TransitionGroupProps

Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

src/react/components/TransitionGroup.tsx:81

---

useAnimation

▸ useAnimation<Args>(...args): AnimationHandle<Args>

A basic hook to use Web Animations API. See AnimationHandle.

Type parameters

Name	Type	Description
Args	void	argument type

Parameters

Name	Type
...args	AnimationDefinition<Args>

Returns

AnimationHandle<Args>

Defined in

src/react/hooks/useAnimation.ts:104

---

useAnimationFunction

▸ useAnimationFunction<Args>(onUpdate, options?): AnimationFunctionHandle<Args>

Same as useAnimation, but it drives function not React element. See AnimationFunctionHandle.

Type parameters

Name	Type	Description
Args	void	argument type

Parameters

Name	Type
onUpdate	AnimationFunction<Args>
options?	AnimationFunctionOptions

Returns

AnimationFunctionHandle<Args>

Defined in

src/react/hooks/useAnimationFunction.ts:69

---

useTransitionAnimation

▸ useTransitionAnimation(keyframes): TransitionAnimationHandle

A hook to compose multiple useAnimation and plays them when element enter/update/exits. This hook must be used under TransitionGroup component.

Parameters

Name	Type
keyframes	Object
keyframes.enter?	TransitionAnimationDefinition
keyframes.update?	TransitionAnimationDefinition
keyframes.exit?	TransitionAnimationDefinition

Returns

TransitionAnimationHandle

Defined in

src/react/hooks/useTransitionAnimation.ts:38

---

useScrollTimeline

▸ useScrollTimeline(opts?): TimelineDefinition

Parameters

Name	Type
opts	ScrollTimelineOpts

Returns

TimelineDefinition

Defined in

src/react/hooks/useScrollTimeline.ts:11

---

useViewTimeline

▸ useViewTimeline(opts?): TimelineDefinition

Parameters

Name	Type
opts	ViewTimelineOpts

Returns

TimelineDefinition

Defined in

src/react/hooks/useViewTimeline.ts:16

Type Aliases

TypedKeyframe

Ƭ TypedKeyframe: Pick<Keyframe, "composite" | "easing" | "offset"> & { [key: --${string}]: string | number; } & AnimatableCSSProperties

Strictly typed Keyframe

Defined in

src/core/waapi.ts:17

---

TypedEasing

Ƭ TypedEasing: Exclude<CSSProperties["animationTimingFunction"], CSSProperties["all"] | undefined>

Defined in

src/core/waapi.ts:22

---

GetKeyframeFunction

Ƭ GetKeyframeFunction<Args>: Args extends void ? (prev: CSSStyleDeclaration) => TypedKeyframe[] : (prev: CSSStyleDeclaration, args: Args) => TypedKeyframe[]

A function to define keyframe dynamically

• prev: current style
• args: any argument passed from play

Type parameters

Name	Type
Args	void

Defined in

src/core/waapi.ts:32

---

AnimatableCSSProperties

Ƭ AnimatableCSSProperties: Omit<CSSProperties, "offset" | "float"> & { cssOffset?: CSSProperties["offset"] ; cssFloat?: CSSProperties["float"] ; d?: string }

Defined in

src/core/waapi.ts:4

---

PlayOptions

Ƭ PlayOptions: Object

Type declaration

Name	Type	Description
restart?	boolean	If true, plays from the start. It's similar to GSAP's restart().

Defined in

src/core/waapi.ts:85

---

WaitingAnimationEventName

Ƭ WaitingAnimationEventName: "finish" | "reverseFinish"

Defined in

src/core/waapi.ts:185

---

PlayOptionsWithArgs

Ƭ PlayOptionsWithArgs<Args>: PlayOptions & { args: Args }

Type parameters

Name	Type
Args	void

Defined in

src/react/hooks/useAnimation.ts:38

---

ComputedTimingContext

Ƭ ComputedTimingContext: Required<{ [key in keyof ComputedEffectTiming]: NonNullable<ComputedEffectTiming[key]> }>

Non nullable ComputedEffectTiming

Defined in

src/react/hooks/useAnimationFunction.ts:32

---

AnimationFunction

Ƭ AnimationFunction<Args>: Args extends void ? (ctx: ComputedTimingContext) => void : (ctx: ComputedTimingContext, args: Args) => void

An argument of useAnimationFunction. In this callback you can update any state or ref in JS.

• ctx: current animation state
• args: any argument passed from play

Type parameters

Name	Type
Args	void

Defined in

src/react/hooks/useAnimationFunction.ts:42

---

TransitionAnimationDefinition

Ƭ TransitionAnimationDefinition: [keyframe: TypedKeyframe | TypedKeyframe[] | GetKeyframeFunction, options?: TransitionAnimationOptions]

Defined in

src/react/hooks/useTransitionAnimation.ts:28

---

AnimationDefinition

Ƭ AnimationDefinition<Args>: [keyframe: TypedKeyframe | TypedKeyframe[] | GetKeyframeFunction<Args>, options?: AnimationOptions]

Type parameters

Name
Args

Defined in

src/react/types/index.ts:12

---

ScrollTimelineAxis

Ƭ ScrollTimelineAxis: "block" | "inline" | "y" | "x"

Defined in

src/react/types/index.ts:29

---

ViewTimelineInset

Ƭ ViewTimelineInset: "auto" | string & {}

Defined in

src/react/types/index.ts:31