QuickTip: Basic play / pause toggle button

Sign in to follow this   Followers 0

Learn how to make a simple play / pause toggle button to control any GSAP animation (tweens or timelines). Same concepts apply to toggling the reversed() state of an animation too.

Watch the video

Explore the demo

Core code

tl.pause() // pauses the animation
tl.paused() // gets paused state, returns true or false
tl.paused(true) // sets paused state to true
tl.paused(!tl.paused()) // sets paused state to inverse of current paused state.

// reverse methods
tl.reverse() // reverses the animation
tl.reversed() // gets reversed state, returns true or false
tl.reversed(true) // sets reversed state to true
tl.reversed(!tl.reversed()) // sets reversed state to inverse of current reversed state.