Pausing then resuming a timeline

[Jloafs]

Hi guys

 

I'm trying to figure out how to pause a timeline (between these .to) then add a button to resume the playback from the pause point. Any help would probably save me hours banging my head against a wall 

 

.to("element", {
      delay: -1,
      opacity: 1,
      y: "0",
      duration: 1.5,
      ease: Power4.easeOut,
    })
    .to("element", {
      delay: 5,
      opacity: 0,
      y: "-100vh",
      duration: 1.5,
      ease: Power4.easeOut,
    })

 

[Rodrigo]

Hi,

 

GSAP timeline instances have an addPause() method that should be exactly what you're looking for:

const tl = gsap.timeline()
  .to("element", {
    delay: -1,
    opacity: 1,
    y: "0",
    duration: 1.5,
    ease: Power4.easeOut,
  })
  .addPause()
  .to("element", {
    delay: 5,
    opacity: 0,
    y: "-100vh",
    duration: 1.5,
    ease: Power4.easeOut,
  });

const button = document.getElementById("button");
button.addEventListener("click", () => {
  tl.play();
});

https://greensock.com/docs/v3/GSAP/Timeline/addPause()

 

Let us know if you have other questions.

 

Happy Tweening!

[Jloafs]

Brilliant - thanks. For some reason I was missing the 'add' in 'addPause' when playing with this.