暂停 animation 在 GSAP (GreenSock) 中不工作

Question

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

Answer 1

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>