gsapでsvgの子要素を徐々に出現させる方法

2021年8月31日gsap

gsapでsvgの子要素を徐々に出現させる方法を紹介します。

デモ

See the Pen
gsap stones anim by Sosak (@Sosak2021)
on CodePen.

gsapでsvgの子要素を徐々に出現させる方法

svgを用意します。

そのとき、gタグにid属性が振られるように、設定します。
イラストレーターなら、グループ名に英語で名前をつけます。そして、svgの書き出しで内部CSSでの書き出しを選択します。

JavaScript

let TL = gsap.timeline({ease: 'sine.in'})

timelineをインスタンス化して使えるようにします。

TL
.set('#person', {opacity: 0})

透明度など予め設定しておきたい値がある場合は、set()メソッドを使います。

// #stoneを選択
let groundStones = document.querySelectorAll('#ground *')

groundStones.forEach(element => {
  element.style.opacity = 0;
})

// 積石の子要素を選択
let stones = Array.from(document.querySelectorAll('#stones *'))

stones.forEach(el => {
  console.log(el);
  el.style.opacity = 0;
})

徐々に出現させる子要素をもったidの子要素をすべて選択します。
そのためには、querySelectorAllで(*)などを使って子要素を選択します。
そして、forEachでそれぞれの要素にopacityを設定します。
gsapのset()メソッドでもOKです。

TL
.to('#ground *', {opacity: 1, duration: 0.3, stagger: 0.1})
.to('#stones *', {opacity: 1, duration: 1, stagger: 0.2})
.to('#person', {opacity: 1, duration: 0.8})

そして、後はそれぞれをto()メソッドで出現させます。
staggerを設定することで徐々に出現させることができます。

// ボタン
const pause = document.querySelector('#pause')
const play = document.querySelector('#play')
const restart = document.querySelector('#restart')
restart.addEventListener('click', () => {
  TL.restart()
})
play.addEventListener('click', () => {
  TL.play()
})
pause.addEventListener('click', () => {
  TL.pause()
})

ボタンを設置する場合は、上のように便利なrestart()メソッド、pause()メソッド、play()メソッドがあります。