(4)前端好好玩用 GSAP 做一個特效 - 選取目標

前言

上一篇我們認識到了基本的動畫設定與語法，接下來這一篇將會針對選取目標來介紹。

選取目標

前面章節介紹到了以下這種選取方式

1

gsap.to('#box', { x: 100, duration: 3 })

其實這種選取方式與 document.querySelector() 是一樣的，因此不論是 ID 或是 class 都是可以的

1

gsap.to('.box', { x: 100, duration: 3 })

那麼剛剛有提到選取方式類似於 document.querySelector()，所以你也真的可以用 document.querySelector() 方式來選取

1
2

const box = document.querySelector('#box')
gsap.to(box, { x: 100, duration: 3 })

當然也可以做一些比較複雜的 CSS 選取方式

1

gsap.to('div.box', { x: 100, duration: 3 })

如果想選取多個目標的話，也是可以使用 document.querySelectorAll() 來選取

1
2

const boxes = document.querySelectorAll('.box')
gsap.to(boxes, { x: 100, duration: 3 })

當然如果你是不同的 className 也是可以的，只是會變成改傳入陣列的方式

1

gsap.to(['.box1', '.box2'], { x: 100, duration: 3 })

透過上面範例我們可以看到 GSAP 的選取方式與 CSS 選取方式是一樣的，因此你可以使用任何 CSS 選取方式來選取目標，當然也可以使用 document.querySelector() 或是 document.querySelectorAll() 來選取，完全取決於你的喜好、需求．

那麼這一篇就先到這邊囉。