Skip to content

Latest commit

 

History

History
33 lines (24 loc) · 1.27 KB

05-pause-or-resume-an-animation-by-checkout-isactive-with-greensock.md

File metadata and controls

33 lines (24 loc) · 1.27 KB
Raw

Pause or Resume an Animation by Checkout isActive with Greensock

📹 Video

To repeat timeline animation

  • Use the greensock TimelineMax's 🤔repeat property.
  • A positive number will be the number of times an animation repeats, but a -1 will cause it to repeat indefinitely. Use -1 in this instance
const timeline = new TimelineMax({ repeat: -1 })

Pause and Resume by checking isActive() property

  • If an animation is currently running, its 'isActive()' property will be true.
  • If paused the 'isActive()' property will be false.
  • Therefore a conditional is all that is needed to toggle an animation on and off.
document.getElementById("box").addEventListener('click', () => {
    if(timeline.isActive()){
        timeline.pause()
    }else{
        timeline.resume()
    } 
})

Check it out . . . You can now pause and resume your animation by clicking on the box.

📹 Go to Previous Lesson 📹 Go to Next Lesson