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

GSAP 選取方式與 CSS 選取方式是一樣的，可以使用任何 CSS 選取方式來選取目標，當然也可以使用 document.querySelector() 或是 document.querySelectorAll() 來選取。

使用 .className 或是 #idName 的方式

與原生 JS 的 document.querySelector() 的方式一樣，名稱指定 ID 或是 class 都可以。

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

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

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

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

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

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

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

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

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

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

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

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

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