Interface: AnimationHandle

November 28, 2023 · View on GitHub

Handle of useAnimation.

Type parameters

NameTypeDescription
Argsvoidargument type

Hierarchy

Callable

AnimationHandle

AnimationHandle(ref): void

You have to pass this callback to ref of element you want to control.

Parameters

NameType
refnull | Element

Returns

void

Defined in

src/react/hooks/useAnimation.ts:97

Table of contents

Methods

Methods

play

play(...opts): BaseAnimationHandle<Args>

A wrapper of Web Animations API's play. It's similar to GSAP's play().

Parameters

NameType
...optsArgs extends void ? [PlayOptions?] : [PlayOptionsWithArgs<Args>]

Returns

BaseAnimationHandle<Args>

Inherited from

BaseAnimationHandle.play

Defined in

src/react/hooks/useAnimation.ts:44


reverse

reverse(): BaseAnimationHandle<Args>

A wrapper of Web Animations API's reverse. It's similar to GSAP's reverse().

Returns

BaseAnimationHandle<Args>

Inherited from

BaseAnimationHandle.reverse

Defined in

src/react/hooks/useAnimation.ts:50


cancel

cancel(): BaseAnimationHandle<Args>

A wrapper of Web Animations API's cancel. It's similar to GSAP's kill().

Returns

BaseAnimationHandle<Args>

Inherited from

BaseAnimationHandle.cancel

Defined in

src/react/hooks/useAnimation.ts:54


finish

finish(): BaseAnimationHandle<Args>

A wrapper of Web Animations API's finish.

Returns

BaseAnimationHandle<Args>

Inherited from

BaseAnimationHandle.finish

Defined in

src/react/hooks/useAnimation.ts:58


pause

pause(): BaseAnimationHandle<Args>

A wrapper of Web Animations API's pause. It's similar to GSAP's pause().

Returns

BaseAnimationHandle<Args>

Inherited from

BaseAnimationHandle.pause

Defined in

src/react/hooks/useAnimation.ts:62


setTime

setTime(time): BaseAnimationHandle<Args>

A setter of Web Animations API's currentTime. It's similar to GSAP's seek().

If you pass function, you can get endTime from its argument.

Parameters

NameType
timenumber | (endTime: number) => number

Returns

BaseAnimationHandle<Args>

Inherited from

BaseAnimationHandle.setTime

Defined in

src/react/hooks/useAnimation.ts:68


setPlaybackRate

setPlaybackRate(rate): BaseAnimationHandle<Args>

A wrapper of Web Animations API's updatePlaybackRate. It's similar to GSAP's timeScale().

If you pass function, you can get current playbackRate from its argument.

Parameters

NameType
ratenumber | (prevRate: number) => number

Returns

BaseAnimationHandle<Args>

Inherited from

BaseAnimationHandle.setPlaybackRate

Defined in

src/react/hooks/useAnimation.ts:76


waitFor

waitFor(event): Promise<BaseAnimationHandle<Args>>

A getter of Promise that will be resolved in specified timing.

  • finished: resolved when animation is finished and its playback direction is normal.
  • reverseFinished: resolved when animation is finished and its playback direction is reversed.

Parameters

NameType
eventWaitingAnimationEventName

Returns

Promise<BaseAnimationHandle<Args>>

Inherited from

BaseAnimationHandle.waitFor

Defined in

src/react/hooks/useAnimation.ts:85