ScrollMagicのサンプル(anime.jsやGSAPと併用/ScrollTrigger)

プログラミング学習

GSAPのScrollTriggerが有料だったためScrollMagicとanime.jsで実装したというお話ですが、主な内容は次のとおりです。

  • ScrollMagicでスクロールした際にnuxtでanime.jsを使ってアニメーションをする
  • GSAPのScrollTrigger以外のScrollTrigger
  • スクロール時に要素のインアウトをとる方法を覚書

GSAPのScrollTriggerとanime.js

GSAPのScrollTriggerが有料だったので、ScrollMagicという似たライブラリを使いました。

GSAPのライセンスはこちらの記事をみてください。

公式サイトはこちらです。

こちらとanimejsを組み合わせればよさそうです。GSAPが嫌い君のツイートで発見しました。

デモはこちらです。

Animating with GSAPとAnimating with Velocityは正式にサポートされた関数がありますが、anime.jsはないようです。要素を.onのタイミングでひっかけているだけですね。試したところ一応動きました。

スポンサーリンク

nuxtでScrollMagicの使い方

インストールと設定

インストールします。

npm install scrollmagic --save

あまり更新されていませんが、vue-scrollmagicというものもあるようです。今回は通常版をインストールしました。ScrollMagicは更新されています。どちらをインストールするかによって多少使い方が違うようです。

plungin以下にscrollmagic.jsを作成。

import Vue from 'vue';
import * as ScrollMagic from 'scrollmagic';

Object.defineProperty(Vue.prototype, '$scrollmagic', { value: ScrollMagic });

nuxt.config.jsに追記。

 plugins: [
   { src: '~/plugins/scrollmagic.js', mode: 'client' }
 ],

stackoverflowを見ました。

ScrollMagicのサンプル(anime.jsと併用)

.onされたタイミングでアニメーションを呼び出してみました。

  mounted() {
    const controller = new ScrollMagic.Controller()
    this.scene = new ScrollMagic.Scene({
      triggerElement: '#anime',
      // triggerHook: 'onEnter',
      // triggerHook: 'onLeave',
      // triggerHook: 1,
      reverse: true,
      offset: 0
    })
      // .setTween('#anime', {
      //   css: {
      //     opacity: '0'
      //   }
      // })
      // .setPin('#anime')
      .on('enter', function(event) {

        anime({
          targets: '#anime',
          translateX: 100,
          rotate: 360,
          duration: 5000,
          easing: 'easeInOutSine'
        })
      })
      // .on('leave', function(event) {
      // })
      // .on('progress', function(event) {
      // })
      .addTo(controller)
  }
  • setTweenのサンプルで紹介しているサイトが多いですが、GSAPをインストールしないと使えません(商用ビジネスは有料です)。
  • .setPinは固定するものです。スクロールした際にサイドバーのバナーを固定みたいな感じでしょうか。
  • triggerHookはonなんちゃでも数字でも書けます。省略も可。

簡単なテストということでこんなところで。すごいおすすめかと言われるとそうじゃない気もするので、もっと良い方法があれば知りたいところです。他のライブラリも軽く調べてみました。

スポンサーリンク

GSAPのScrollTriggerじゃないScrollTrigger

ScrollTriggerという同名のライブラリを見つけました。。

viewportないでclass指定のアニメーションができる模様。詳しく追っていませんが同名だけどたぶん違うものっぽいです。

わかりやすいライブラリですが、githubを見たところ最終更新日が古めです。

スポンサーリンク

VueでScrollMagicやGSAP以外の方法でスクロール時のアニメーションを実装

他の方法としてvueのdirectiveを使っている方や自作している方がいました。

参考になれば幸いです。

コメント

タイトルとURLをコピーしました