Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

QuickTip: Basic play / pause toggle button
Sign in to follow this  


| GreenSock
45771

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

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

See the Pen Toggle Play Pause by GreenSock (@GreenSock) on CodePen.

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.

Get an all-access pass to premium plugins, offers, and more!

Join the Club

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×