BaseAnimationHandle.md

Interface: BaseAnimationHandle<Args>

Type parameters

Name	Type
Args	void

Hierarchy

• BaseAnimationHandle

  ↳ AnimationHandle

  ↳ AnimationFunctionHandle

Table of contents

Methods

• play
• reverse
• cancel
• finish
• pause
• setTime
• setPlaybackRate
• waitFor

Methods

play

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

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

Parameters

Name	Type
...opts	Args extends void ? [PlayOptions?] : [PlayOptionsWithArgs<Args>]

Returns

BaseAnimationHandle<Args>

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>

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>

Defined in

src/react/hooks/useAnimation.ts:54

---

finish

▸ finish(): BaseAnimationHandle<Args>

A wrapper of Web Animations API's finish.

Returns

BaseAnimationHandle<Args>

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>

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

Name	Type
time	number | (endTime: number) => number

Returns

BaseAnimationHandle<Args>

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

Name	Type
rate	number | (prevRate: number) => number

Returns

BaseAnimationHandle<Args>

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

Name	Type
event	WaitingAnimationEventName

Returns

Promise<BaseAnimationHandle<Args>>

Defined in

src/react/hooks/useAnimation.ts:85