MEDIA

  • 2022.07.21

    スクロールアニメーションが簡単にできる「GSAP」

    今回は誰でも簡単に実装が可能なアニメーションライブラリ「GSAP」をご紹介します。
    
    

    GSAPとは?

    GSAPとは、アニメーションを実装するために特化した無料のjavascriptのライブラリです。
    近年、動きのあるリッチなサイトが数多く見られる中、非常に役立つライブラリですね。
    
    
    ここで一点注意点として、GSAPにはライセンスが2種類あります。
    1つは「Standard License」。 
    もう1つが「Business License」です。
    
    
    このGSAP、特定の場合には「Business License」が必要となり有料となります。
    簡単に説明すると月々一定の金額を払う「課金要素(サブスクリプション)のあるサイト」の場合ですね。
    例えばNETFLIXなどがそうですね。
    
    
    通常のwebサイトであれば「Standard License」で利用可能なようです。
    https://greensock.com/licensing/
    詳しくは公式サイトでご確認ください。
    
    

    GSAPの使い方

    今回はスクロールアニメーションに特化してご紹介をさせていただきます。
    
    

    ScrollTrigger.jsを読み込む

    GSAP本体とScrollTrigger.jsの2つを読み込みます。CDNから読む込む場合は以下を書きます。
    
    <script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/gsap.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/ScrollTrigger.min.js"></script>
    
    

    基本的な書き方

     

    HTML

    <section class="gsap_sec">
      <div class="gsap-trigger">
        <!― ここに動かしたい要素 ― >
     </div>
    </section>
    

    JS

    gsap.to('.gsap_sec', { //アニメーションしたい要素を指定
     x: 800, //横に800px動かす
     scrollTrigger: {
      trigger: '.gsap_trigger',//アニメーションが始まるトリガーとなる要素
      start: 'top center', //アニメーションが始まる位置を指定
     }
    });
    
    クラス名gsap_trigger要素のトップが、ブラウザの中央部分と重なると、
    クラス名gsap_sec要素が右に800px動く、、という内容です。
    
    
    

    アニメーション前の状態を指定したい場合

    例えば透過した状態からアニメーションさせたい場合など、
    特定の状態からアニメーションさせたい場合は以下のように書きます。
    

    JS

    gsap.set('.gsap_sec', {autoAlpha: 0});
    //初期状態としてopacity: 0;とvisibility: hidden;が指定される
    gsap.to('.gsap_sec', { 
      autoAlpha: 1, //opacity: 1;とvisibility:visible;がつく
      scrollTrigger: {
        trigger: '.gsap_trigger',
        start: 'top center'
      }
    });
    

    スクロールに合わせて、アニメーションを進める

     

    JS

    gsap.to('.gsap_sec', {
      x: 800,
      scrollTrigger: {
        trigger: '.gsap_trigger',//アニメーションが始まるトリガーとなる要素
        start: 'top center', //アニメーションが始まる位置
        end: 'bottom center', //アニメーションが終わる位置
        scrub: true, //スクロール量に合わせてアニメーションが進む(数字も指定できる)
      }
    });
    

    指定できるアニメーション

    ほとんどのCSSをアニメーションで指摘できます。以下は例です。
    
    gsap.to('.gsap_sec', { 
      autoAlpha: 1, //opacity: 1;とvisibility:visible;がつく
      x: 100, //右に100px移動。-100で左に100px移動。
      y: 200, //下に200px以上。-200で上に200px移動。
      scale:2, //2倍にする。scaleXとscaleYも指摘できる
      rotation: -30, //回転。rotationXとrotationYも指定できる
      skewX: "30deg", //変形 skewYも使える。skewは使えない。 
      delay: 2, //2秒後にアニメーションさせる
      duration: 5, //5秒後かけてアニメーションさせる
      backgroundColor: "red", //背景色を赤にする
      
    });
    
    
    以上、簡単ではありますが、GSAPのスクロールアニメーションの使い方でした。