gsap.to()、gsap.from()和gsap.fromTo()定義了基本動畫架構，除此之外，gsap也提供了動畫控制的函式，像是開始start()、暫停pause()、倒轉播放reverse()、回到開始狀態restart()，可以藉此快速建立所需的功能，增加互動性甚至是動態的豐富度。

為了讓使用更方便，通常會把動畫定義至一個變數中，之後針對這個變數套用這些函式：

let myTween = gsap.fromTo("#my-div", {opacity: 0}, {opacity: 1, duration: 3});
myTween.play();
myTween.pause();

可以把剛剛的play()與pause()等函式，指定至對應按鈕上，進行相對應的功能控制；指定的方式可以有很多寫法，這邊搭配上個系列的jQuery使用：

$('#button-play').click(function(){
  myTween.play()
});
$('#button-pause').click(function(){
  myTween.pause()
});

GSAP提供的另一個kill()函式，可以達成進行中的動畫暫停，但同時會整個移除動畫效果，也就是說，若使用觸發了這個函式，是無法與pause()相同使用play()就能讓動畫繼續進行，需要另外安排將動畫定義上去才行。

另外，.seek()函式可加入數字參數，指定動畫跳至某個時間的狀態，若使用.seek(0)，就能控制動畫直接跳到最初狀態，回到0秒的階段。

//定義動畫
let myTween = gsap.fromTo("#my-div", {opacity: 0}, {opacity: 1, duration: 3});
//指定播放按鈕
$('#button-play').click(function(){
  myTween.play()
});
//指定暫停按鈕
$('#button-pause').click(function(){
  myTween.pause()
});
//讓動畫暫停並移除動畫，無法再利用play()函式繼續撥放
$('#button-kill').click(function(){
  myTween.kill()
});
//讓動畫移至指定時間段，這邊定義為0秒狀態
$('#button-seek').click(function(){
  myTween.seek(0)
});