TweenMax/TimelineMax/ScrollMagicの組み合わせで同一クラスの複数要素をアニメーションさせるデモ色々

長いタイトルですが…カードやメディア等がスクロールに応じて下からフェードインするようなアニメーション良く見ますよね。
そういったものに応用できるかと思います。

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トリガー複数バージョン

タイトルなど１ページに複数回出現する要素に同じ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";