LoginSignup
10
12

More than 5 years have passed since last update.

TweenMaxとScrollMagicで自由自在にスクロールアニメーション

Posted at

フロントエンド弱い自分でも、かなりぐりんぐりんなスクロールアニメーションを実装出来たので、その時のメモ。

TweenMaxとは

任意のアニメーションを実現できるJavaScriptライブラリ。
GreenSockが作っている。TweenLiteという軽量版もある。

GreenSock | TweenMax
https://greensock.com/tweenmax

こんな風に書きます。
cssアニメーションのkeyframeみたいに前の状態(from)と後の状態(to)を決めて、

こんなことができます。

ScrollMagicとは

スクロールアニメーションを作るためのJavaScriptライブラリ。
TweenMaxで作ったアニメーションの、時間軸をスクロール量に置き換えたり、特定のスクロール位置に達したら何かのアニメーションをトリガーするなどしてスクロールアニメーションを作る。

ScrollMagic ♥ Demo
http://scrollmagic.io/

例がいっぱいあって、けっこうときめきます。

Examples - ScrollMagic
http://scrollmagic.io/examples/index.html

複数アニメーションを入れるためのTimelineMax

複数のアニメーションを入れるときはこちら。

GreenSock | TimelineMax
https://greensock.com/timelinemax

(今後デモを追加する予定。。。)

10
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
12