Pause animation not working in GSAP (GreenSock)

user_11122892 0
Viewed 80

I'm new with GSAP (greensock), I created this text slide animation and it's working fine but I want it to play/pause on button click, for some reason it's not working as required.

let cT;

let changeText = (hold) => {
  let cText = gsap.utils.toArray('.text');
  gsap.set(cText, { autoAlpha: 1 });

  cText.forEach((obj, i) => {
    cT = gsap.timeline({
      delay: 0.5 * i + hold * i,
      repeat: -1,
      repeatDelay: (cText.length - 1) * (0.5 + hold) - 0.5,
      defaults: {
        ease: 'none',
        duration: 0.5,
      },
    });
    cT.from(obj, { yPercent: -60, opacity: 0 });
    cT.to(obj, { yPercent: 60, opacity: 0 }, '+=' + hold);
   
  });
};

changeText(3)


let pauseBtn = document.getElementById('pause');

pauseBtn.onclick = function () {
  cT.paused(!cT.paused());
  pauseBtn.innerHTML = cT.paused() ? 'Play' : 'Pause';
};
.side-text {
  position: relative;
}

.text {
  position: absolute;
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
     <div class="side-text">
            <h5 class="text">First</h5>
            <h5 class="text">Second</h5>
            <h5 class="text">Third</h5>
            <h5 class="text">Fourth</h5>
          </div>
          
       <div class="text-center">
      <button type="button" id="pause" class="btn btn-primary">Pause</button>
    </div>

Thanks! will appreciate any help.

gsap javascript
1 Answers

This worked for me! I took out gsap.timeline from the loop and used gsap.set inside loop for delays.

let cT;

let changeText = (hold) => {
  let cText = gsap.utils.toArray('.text');

  cT = gsap.timeline({
    repeat: -1,
    defaults: {
      ease: 'none',
      duration: 0.5,
    },
  });

  gsap.set(cText, { autoAlpha: 1 });

  cText.forEach((obj, i) => {
    gsap.set(cText, {
      delay: 0.5 * i + hold * i,
      repeatDelay: (cText.length - 1) * (0.5 + hold) - 0.5
    });
    cT.from(obj, { yPercent: -60, opacity: 0 });
    cT.to(obj, { yPercent: 60, opacity: 0 }, '+=' + hold);
  });
};

changeText(3);


let pauseBtn = document.getElementById('pause');

pauseBtn.onclick = function () {
  cT.paused(!cT.paused());
  pauseBtn.innerHTML = cT.paused() ? 'Play' : 'Pause';
};
.side-text {
  position: relative;
}

.text {
  position: absolute;
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
     <div class="side-text">
            <h5 class="text">First</h5>
            <h5 class="text">Second</h5>
            <h5 class="text">Third</h5>
            <h5 class="text">Fourth</h5>
          </div>
          
       <div class="text-center">
      <button type="button" id="pause" class="btn btn-primary">Pause</button>
    </div>

user_111228920
Related