プログラミング学習

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

プログラミング学習

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

  • ScrollMagicでスクロールした際にnuxtでanime.jsを使ってアニメーションをする
  • GSAPのScrollTrigger以外のScrollTrigger
  • スクロール時に要素のインアウトをとる方法を覚書
体験談:個人開発におすすめで安いVPSサーバー!コスパよしXserver VPS!

GSAPのScrollTriggerとanime.js

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

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

【ライセンス比較】GSAP/animejs/JavaScriptのアニメーションライブラリおすすめは?
ebookbrain.net

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

ScrollMagic
scrollmagic.io

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

デモはこちらです。

Scene Manipulation - Examples - ScrollMagic
scrollmagic.io

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

スポンサーリンク

nuxtでScrollMagicの使い方

インストールと設定

インストールします。

npm install scrollmagic --save

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

vue-scrollmagic
www.npmjs.com

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を見ました。

Attention Required! | Cloudflare
stackoverflow.com

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

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

  mounted() {
    const controller = new ScrollMagic.Controller()
    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は固定するものです。スクロールした際にサイドバーのバナーを固定みたいな感じでしょうか。
  • .addTo(controller)するとon時に呼び出される仕組みのようです。複数作る場合は対応をミスらないように。onと並列の位置に。
  • triggerHookはonなんちゃでも数字でも書けます。省略も可。

複数

複数作る場合、こんな書き方もできるようです。

const scene1 = new ScrollMagic.Scene({
(中略)
controller.addScene([scene1, scene2])

ScrollMagicでforEach

ScrollMagicの.onの中でforEachを使うと未定義になってしまうようです。

.on('enter', function(event) {
  this.object.forEach((obj) => {
  })
}
Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

codepenのような感じで外で使えばうまくいきました。

Just a moment...
codepen.io

enter、leave、progress

リファレンスはこちらにあります。

ScrollMagic Class: Scene
scrollmagic.io

ちらっとしか読んでいませんが、とりあえずenter(枠に入る)、leave(枠の前か後にでる)、progress(変更が入るたびに)と簡単に理解しました。

最初は非表示

最初透明からはじめたい場合は透明にしておけばいいだけです。

anime({
  targets: '.anime',
  opacity: 0
})

const controller = new ScrollMagic.Controller()

on内でanimeやtimeline.addするタイミングでopacityを1に戻せばOKです。

アニメーションのdestroy(破棄する) – 繰り返し実行の回避

そのままだとアニメーションが入るたびに繰り返されてしまいます。素早く入ると二重起動もできるためまずそうです。そのためアニメーションを1回だけにします。

まず繰り返し設定をfalse。

reverse: false,

リソースを解放するためにdestroyします。次のコードはシーン終了時に起動するようです。

scene.on('end', () => {
    scene.destroy(true)
})

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

スポンサーリンク

GSAPのScrollTriggerじゃないScrollTrigger

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

ScrollTrigger - Let your page react to scroll changes
terwanerik.github.io

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

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

スポンサーリンク

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

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

参考になれば幸いです。

コメント

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