RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

GSAPでscroll inview アニメーションなどいろいろやってみる

有名なアニメーションライブラリのGSAPでいろいろやってみました。

greensock.com

ちょっと触ったことはありましたが、複雑なアニメーションでない限りはCSSとJSで自分で実装できるなと思い、使う機会はほとんどありませんでした。

しかし、2020年の6月にScrollTriggerというその名の通りスクロールをトリガーにする機能がリリースされました。スクロールに応じてアニメーションさせたり、要素が表示された時にアニメーションさせるなど、よくwebサイトで使われている表現を実装できます。

greensock.com

「要素が表示された時」を自力でやろうとすると、ある要素が何pxの位置にあって、スクロール値をとって、○○pxスクロールした時にclassをつけて発火、画面リサイズした時はまた値を取り直す、などけっこう面倒くさくて、inview系のライブラリを使ったりしてました。

ただ、GSAPで追加されたなら、GSAPで他のアニメーションも書きやすいですし、デフォルトで入れていいレベルに使えるんじゃないかと思い、改めて使ってみました。

インストール

今回はyarn or npmでインストールします。CDNやファイルをダウンロードしたい人は別で調べてみてください

yarn add gsap

基本のアニメーションを書いてみる

ただboxを動かすだけのアニメーションです。

html

<div class="box"></div>

CSS

.box {
  display: block;
  background-color: #000;
  width: 100px;
  height: 100px;
}

JavaScript

以下のように書くとboxが「回転して移動」→「下へ移動」→「回転」という動きをします

import { gsap } from 'gsap'

gsap
  .timeline()
  .to('.box1', { rotation: 180, x: 500, duration: 5 })
  .to('.box1', { duration: 1, y: 200 })
  .to('.box1', { duration: 3, rotation: 360 })

テキストが一文字ずつ浮かび上がるアニメーション

ファーストビューであるような文字が一文字ずつ浮かび上がってくるアニメーションです。

コードはCodepenを見てもらえればわかると思いますが、registerEffectでアニメーションを定義し、 .word ひとつひとつに対して定義したアニメーションをさせています。左から順にフェードインするようにdelayの値を配列の番号で調整しています。

See the Pen GASP animation by misumi (@mismith0227) on CodePen.

要素が表示領域に入ったらアニメーション

最後に本題です。上記の動きを組み合わせてScrollTriggerを使い応用すると、要素が表示領域に入った時にアニメーションさせることができます。以下は単にboxが左から動くだけですが、これさえ分かればアニメーションの部分を工夫するだけです。

See the Pen GSAP scroll in view by misumi (@mismith0227) on CodePen.

上の例は同じアニメーションをboxそれぞれに適用していますが。それぞれ独自の動きにしたい場合は、registerEffectは使わずに個別に指定すればいいと思います。また以下のようにScrollTriggerをimportしないと、ScrollTriggerないぞと怒られます。

import { ScrollTrigger } from 'gsap/ScrollTrigger.js'

gsap.registerPlugin(ScrollTrigger)

gsap.to('.slide-box', {
  scrollTrigger: '.slide-box',
  x: 500,
  duration: 1,
  delay: 0.5
})

よく使われるアニメーションの本当に基盤的な部分だけですが、あとは動きの調整をすればいろいろできるはずです。

GSAP触ってみると楽しいので、また何かサンプル作ってみます。