Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

TweenMaxとは

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

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

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

こんなことができます。

https://codepen.io/ikuwow/pen/aNGmOr

ScrollMagicとは

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

ScrollMagic ♥ Demo
http://scrollmagic.io/

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

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

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

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

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

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

ikuwow
いろんなことをしているWebエンジニアです
https://ikuwow.github.io
bm-sms
高齢社会に適した情報インフラを構築することで価値を創造し社会に貢献し続ける
https://www.bm-sms.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away