長年お世話になっているGSAPさんもバージョン3かあ…。といってもだいぶ前からなんだけど。
バージョン2から3で書き方がずいぶん変わってしまったなあって思いつつ、簡単なオープニングアニメーションサンプルを書いてみた。
See the Pen Simple Image Preload & Starter Animation (GSAP) by Tenderfeel (@Tenderfeel) on CodePen.
動作の流れ
これはオシャなサイトでよくやってるかんじのやつ。
- コンテンツはopacity:0で非表示にしておく
- ローディング表示
- 画像プリロード
- ローディング非表示アニメーション
- コンテンツ表示アニメーション
アセットの読み込みしてからローディング消して、アニメーションでコンテンツ表示させる。
画像のプリロード
これは昔ながらのimg要素作ってonloadするやつを、Promise使ってthenできるようにしたもの。
実際使うならタイムアウト処理も入れておくのが無難と思う。
link属性のpreload が使える時代になってるけど、進捗を出したいって時にはこっちになるかなあ？
ローディング
このクラスがやってることは２つしかない
- 要素の生成とbodyへの追加
- 非表示アニメーション
インジケーター部分は生成面倒だったから#progress-contentの中身をそのまま追加する。
<script type="text/template" id="progress-content">
<div class="progress__bar">
<div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div class="progress__text">Loading</div>
</script>
複数の要素を連続で表示するアニメーション
GSAP3だとこんな書き方。
const gallery = gsap.from('figure', {
opacity: 0,
duration: 0.8,
stagger: 0.2,
ease: 'power1.inOut',
paused: true
})
gallery.play()
toにするかfromにするかは初期状態のCSSをどうするかによる。
初期非表示ならto、初期表示ならfrom。
実行
const progress = new Progress({
onComplete: () => {
console.log('progress complete')
gallery.play()
}
})
const preloader = new Preloader({
onProgress: count => {
console.log('progress:', count)
},
})
preloader.start().then(() => {
console.log('preload complete')
progress.hide()
})