長いタイトルですが…カードやメディア等がスクロールに応じて下からフェードインするようなアニメーション良く見ますよね。
そういったものに応用できるかと思います。
TweenMax / TimelineMax / ScrollMagicの3つを組み合わせて記述する方法もあるみたいなのですが、ややこしいので”TweenMax+ScrollMagic”、タイムラインを使用する場合は”TimelineMax+ScrollMagic”を組み合わせる、と覚えておくといいかもしれません。
TweenMaxだけバージョン
HTML
CSSはデモを参照ください。
<section class="main-section"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </section>
読み込むCDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
JavaScriptでアニメーションするバージョン
TweenMax.to('.item', 1, {scale: 1.5});
クラス追加でアニメーションするバージョン
TweenMax.set('.item', {className:"+=is-active"});
TimelineMaxだけバージョン
HTML
CSSはデモを参照ください。
<section class="main-section"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </section>
読み込むCDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineMax.min.js"></script>
JavaScriptでアニメーションするバージョン
const tl = new TimelineMax(); tl.staggerTo('.item', 1, {scale:1.5}, 0.5);
クラス追加でアニメーションするバージョン
const tl = new TimelineMax(); tl.staggerTo('.item', 1, {className:"+=is-active"}, 0.5);
TweenMax + ScrollMagic
HTML
CSSはデモを参照ください。
<section class="first-section"> <p>下にスクロール!!</p> </section> <section id="trigger-section" class="main-section"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </section> <section class="last-section"> <p>上にスクロール!!</p> </section>
読み込むCDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
開発時にトリガーの場所を確認できるインジケーターを表示するには下記も追加してください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
JavaScriptでアニメーションするバージョン
const controller = new ScrollMagic.Controller(); const tween = TweenMax.to('.item', 1, {scale: 1.5}); const scene = new ScrollMagic.Scene({ triggerElement: "#trigger-section" }) .setTween(tween) .addIndicators() .addTo(controller);
クラス追加でアニメーションするバージョン
const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: "#trigger-section" }) .setClassToggle(".item", "is-active") .addIndicators() .addTo(controller);
TimelineMax + ScrollMagic
HTML
CSSはデモを参照ください。
<section class="first-section"> <p>下にスクロール!!</p> </section> <section id="trigger-section" class="main-section"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </section> <section class="last-section"> <p>上にスクロール!!</p> </section>
読み込むCDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
開発時にトリガーの場所を確認できるインジケーターを表示するには下記も追加してください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
JavaScriptでアニメーションするバージョン
const controller = new ScrollMagic.Controller(); const tl = new TimelineMax(); tl.staggerTo('.item', 1, {scale:1.5}, 0.5); const scene = new ScrollMagic.Scene({ triggerElement: "#trigger-section" }) .setTween(tl) .addIndicators() .addTo(controller);
クラス追加でアニメーションするバージョン
const controller = new ScrollMagic.Controller(); const tl = new TimelineMax(); tl.staggerTo('.item', 1, {className:"+=is-active"}, 0.5); const scene = new ScrollMagic.Scene({ triggerElement: "#trigger-section" }) .setTween(tl) .addIndicators() .addTo(controller);
TimelineMax + ScrollMagic + スクロール量とアニメーション連動
HTML
CSSはデモを参照ください。
<section class="first-section"> <p>下にスクロール!!</p> </section> <section id="trigger-section" class="main-section"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </section> <section class="last-section"> <p>上にスクロール!!</p> </section>
読み込むCDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
開発時にトリガーの場所を確認できるインジケーターを表示するには下記も追加してください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
JavaScriptでアニメーションするバージョン
const controller = new ScrollMagic.Controller(); const tl = new TimelineMax(); tl.staggerTo('.item', 1, {scale:1.5}, 0.5); const scene = new ScrollMagic.Scene({ triggerElement: "#trigger-section", duration: '100%', //もしくは1000等の数値 triggerHook: 0 }) .setTween(tl) .addIndicators() .setPin('#trigger-section') .addTo(controller);
クラス追加でアニメーションするバージョン
const controller = new ScrollMagic.Controller(); const tl = new TimelineMax(); tl.staggerTo('.item', 1, {className:"+=is-active"}, 0.5); const scene = new ScrollMagic.Scene({ triggerElement: "#trigger-section", duration: '100%', //1000等の数値とかも triggerHook: 0 }) .setTween(tl) .addIndicators() .setPin('#trigger-section') .addTo(controller);
【オマケ】TweenMax + ScrollMagicトリガー複数バージョン
タイトルなど1ページに複数回出現する要素に同じclassを付与しておいて、スクロールに応じてアニメーションさせる例です。
ループ処理します。
HTML
CSSはデモを参照ください。
<div> <h2 class="title is-active">タイトル</h2> <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p> <h2 class="title is-active">タイトル</h2> <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p> <h2 class="title is-active">タイトル</h2> <p>・・・以下省略</p> </div>
読み込むCDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
開発時にトリガーの場所を確認できるインジケーターを表示するには下記も追加してください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
JavaScriptでアニメーションするバージョン
const controller = new ScrollMagic.Controller(); const titles = document.querySelectorAll(".title"); titles.forEach(title => { //tween作成 const tween = TweenMax.from(title, 0.3, { autoAlpha: 0, scale: 0.5, y: '+=30', ease: Linear.easeNone }); //シーンを作成 const scene = new ScrollMagic.Scene({ triggerElement: title, triggerHook: 1 }) .setTween(tween) //trigger a TweenMax tween .addTo(controller) .addIndicators(); });
jQueryでアニメーションするバージョン
CDNにjQuery追加してください。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
const controller = new ScrollMagic.Controller(); $('.title').each(function(){ //Tween作成 const tween = TweenMax.from($(this), 0.3, { autoAlpha: 0, scale: 0.5, y: '+=30', ease: Linear.easeNone }); //シーンを作成 const scene = new ScrollMagic.Scene({ triggerElement: this, triggerHook: 1 }) .setTween(tween) //trigger a TweenMax tween .addTo(controller) .addIndicators(); });
クラス追加でアニメーションするバージョン
const controller = new ScrollMagic.Controller(); const titles = document.querySelectorAll(".title"); titles.forEach(title => { //シーンを作成 const scene = new ScrollMagic.Scene({ triggerElement: title, triggerHook: 1 }) .setClassToggle(title, "is-active") .addTo(controller) .addIndicators(); });
【さらにオマケ】npmで使う
インストール
npm install gsap npm install scrollmagic npm install scrollmagic-plugin-gsap
Webpack等で読み込み
import * as ScrollMagic from "scrollmagic"; import { TweenMax, TimelineMax } from "gsap"; import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
