let cT; let changeText = () => { let cText = gsap.utils.toArray('.text'); gsap.set(cText, { autoAlpha: 1 }); cText.forEach((obj, i) => { cT = gsap.timeline({ delay: 0.5 * i + 3 * i, repeat: -1, repeatDelay: (cText.length - 1) * (3.5) - 0.5, defaults: { ease: 'none', duration: 0.5, }, }); cT.from(obj, { yPercent: -60, opacity: 0 }); cT.to(obj, { yPercent: 60, opacity: 0 }, '+=' + 3); }); }; changeText() 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>