Tween Control

Lesson 5

A GSAP timeline() is stored in a variable and controlled interactively: tl.play(), tl.pause(), tl.reverse(), tl.restart(). The timeline’s paused: true option prevents auto-play on creation. Buttons wire to each method, giving full playback control.

Source Code script.js

const tween = gsap.to('.box', {
  x: 300,
  duration: 1,
  ease: 'power2.inOut',
  paused: true,
});

const playBtn    = document.querySelector('#play');
const pauseBtn   = document.querySelector('#pause');
const reverseBtn = document.querySelector('#reverse');
const restartBtn = document.querySelector('#restart');
const fill       = document.querySelector('#progressFill');
const value      = document.querySelector('#progressValue');

playBtn.addEventListener('click',    () => tween.play());
pauseBtn.addEventListener('click',   () => tween.pause());
reverseBtn.addEventListener('click', () => tween.reverse());
restartBtn.addEventListener('click', () => tween.restart());

// Live progress indicator
gsap.ticker.add(() => {
  const p = tween.progress();
  fill.style.width  = (p * 100) + '%';
  value.textContent = p.toFixed(2);
});