- TransitionGroup
- useAnimation
- useAnimationFunction
- useTransitionAnimation
- useScrollTimeline
- useViewTimeline
- TypedKeyframeEffectOptions
- TransitionGroupProps
- BaseAnimationHandle
- AnimationHandle
- AnimationFunctionHandle
- AnimationFunctionOptions
- TransitionAnimationHandle
- TransitionAnimationOptions
- ScrollTimelineOpts
- ViewTimelineOpts
- AnimationOptions
- TimelineDefinition
- TypedKeyframe
- TypedEasing
- GetKeyframeFunction
- AnimatableCSSProperties
- PlayOptions
- WaitingAnimationEventName
- PlayOptionsWithArgs
- ComputedTimingContext
- AnimationFunction
- TransitionAnimationDefinition
- AnimationDefinition
- ScrollTimelineAxis
- ViewTimelineInset
▸ 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.
| Name | Type |
|---|---|
«destructured» |
TransitionGroupProps |
ReactElement<any, string | JSXElementConstructor<any>>
src/react/components/TransitionGroup.tsx:81
▸ useAnimation<Args>(...args): AnimationHandle<Args>
A basic hook to use Web Animations API. See AnimationHandle.
| Name | Type | Description |
|---|---|---|
Args |
void |
argument type |
| Name | Type |
|---|---|
...args |
AnimationDefinition<Args> |
AnimationHandle<Args>
src/react/hooks/useAnimation.ts:104
▸ useAnimationFunction<Args>(onUpdate, options?): AnimationFunctionHandle<Args>
Same as useAnimation, but it drives function not React element. See AnimationFunctionHandle.
| Name | Type | Description |
|---|---|---|
Args |
void |
argument type |
| Name | Type |
|---|---|
onUpdate |
AnimationFunction<Args> |
options? |
AnimationFunctionOptions |
AnimationFunctionHandle<Args>
src/react/hooks/useAnimationFunction.ts:69
▸ 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.
| Name | Type |
|---|---|
keyframes |
Object |
keyframes.enter? |
TransitionAnimationDefinition |
keyframes.update? |
TransitionAnimationDefinition |
keyframes.exit? |
TransitionAnimationDefinition |
src/react/hooks/useTransitionAnimation.ts:38
▸ useScrollTimeline(opts?): TimelineDefinition
| Name | Type |
|---|---|
opts |
ScrollTimelineOpts |
src/react/hooks/useScrollTimeline.ts:11
▸ useViewTimeline(opts?): TimelineDefinition
| Name | Type |
|---|---|
opts |
ViewTimelineOpts |
src/react/hooks/useViewTimeline.ts:16
Ƭ TypedKeyframe: Pick<Keyframe, "composite" | "easing" | "offset"> & { [key: --${string}]: string | number; } & AnimatableCSSProperties
Strictly typed Keyframe
Ƭ TypedEasing: Exclude<CSSProperties["animationTimingFunction"], CSSProperties["all"] | undefined>
Ƭ GetKeyframeFunction<Args>: Args extends void ? (prev: CSSStyleDeclaration) => TypedKeyframe[] : (prev: CSSStyleDeclaration, args: Args) => TypedKeyframe[]
A function to define keyframe dynamically
prev: current styleargs: any argument passed from play
| Name | Type |
|---|---|
Args |
void |
Ƭ AnimatableCSSProperties: Omit<CSSProperties, "offset" | "float"> & { cssOffset?: CSSProperties["offset"] ; cssFloat?: CSSProperties["float"] ; d?: string }
Ƭ PlayOptions: Object
| Name | Type | Description |
|---|---|---|
restart? |
boolean |
If true, plays from the start. It's similar to GSAP's restart(). |
Ƭ WaitingAnimationEventName: "finish" | "reverseFinish"
Ƭ PlayOptionsWithArgs<Args>: PlayOptions & { args: Args }
| Name | Type |
|---|---|
Args |
void |
src/react/hooks/useAnimation.ts:38
Ƭ ComputedTimingContext: Required<{ [key in keyof ComputedEffectTiming]: NonNullable<ComputedEffectTiming[key]> }>
Non nullable ComputedEffectTiming
src/react/hooks/useAnimationFunction.ts:32
Ƭ 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 stateargs: any argument passed from play
| Name | Type |
|---|---|
Args |
void |
src/react/hooks/useAnimationFunction.ts:42
Ƭ TransitionAnimationDefinition: [keyframe: TypedKeyframe | TypedKeyframe[] | GetKeyframeFunction, options?: TransitionAnimationOptions]
src/react/hooks/useTransitionAnimation.ts:28
Ƭ AnimationDefinition<Args>: [keyframe: TypedKeyframe | TypedKeyframe[] | GetKeyframeFunction<Args>, options?: AnimationOptions]
| Name |
|---|
Args |
Ƭ ScrollTimelineAxis: "block" | "inline" | "y" | "x"
Ƭ ViewTimelineInset: "auto" | string & {}