search
LoginSignup
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Vue.js(build版コンパイル)で gsapエラー

概要

Vue.jsで画面遷移時のトランジションアニメーション実装してみようってことで、
<transition>タグのイベントフックとgsapを使って、動作検証してみることに。
(導入メモはこちら

serveでコンパイルしていたプレビューではうまくトランジションアニメーションしていたのに、
buildでコンパイルしたものを確認すると・・動いてない・・だと!

ライブプレビューの罠。

エラー内容

コンソールには下記のエラー
Invalid scaleY tween of 0 Missing plugin? gsap.registerPlugin()

同じようなことを質問している人はいるみたいだが・・
https://greensock.com/forums/topic/21874-invalid-scaley-tween-of-0-missing-plugin-gsapregisterplugin/

地味にハマったので、解決法を書いておきます。

画面遷移時トランジション ソース(Before)※エラー出て動かないver

# App.vue

<template>
    <div id="app" class="l-app">
        <transition v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
            <router-view />
        </transition>
        <Gnav />
    </div>
</template>

<script>
import Gnav from '@/components/Gnav.vue'
import { TimelineMax, TweenMax, Power4 } from 'gsap'

export default {
    components: {
        Gnav,
    },
    methods: {
        enter(el, done) {
            const tl = new TimelineMax({
                onComplete: done
            })

            tl.set(el, {
                y: window.innerWidth * 1.5,
                scale: 0.8,
                transformOrigin: '50% 50%'
            })

            tl.to(el, 0.5, {
                y: 0,
                ease: Power4.easeOut
            })

            tl.to(el, 1, {
                scale: 1,
                ease: Power4.easeOut
            })

        },
        leave(el, done) {

            TweenMax.to(el, 1, {
                y: window.innerHeight * 1.5,
                ease: Power4.easeOut,
                onComplete: done
            })
        }
    }
}
</script>

・・・特にトリッキーなことは・・してないと思うのだが・・・
Missing Pluginっていうのをヒントにつぶしていきました。

【原因】gsapの書き方間違い

importの仕方が悪いのか?と思い、gsapのサイトを改めて確認。
すると、どうやら、gsap(v3)ではモジュールの呼び出し方も、メソッドの書き方も変わってる・・・!

▼v3公式リリース
https://greensock.com/3-release-notes

アナウンス通りに書きなおしてみると・・・動いたーー

画面遷移時トランジション ソース(After)※修正して動いたver

<script>
import gsap from 'gsap'

export default {
  methods: {
    enter: function(el, done) {

      let tl = gsap.timeline({    //Timelineの生成の書き方変わった!
        onComplete: done
      })
      tl.set(el, {
        y: window.innerWidth * 1.5,
        scale: 0.8,
        transformOrigin: '50% 50%'
      })
      tl.to(el, {
        duration: 0.4,    //durationも中に!
        y: 0,
        ease: 'power4.easeout'    //easingの書き方も変わった!
      })
      tl.to(el, {
        duration: 0.8,
        scale: 1,
        ease: 'power4.easeout'
      })

    },
    leave: function(el, done) {

      gsap.to(el, {    //TweenMax.to() ではない!
        duration: 0.8,
        y: window.innerHeight * 1.5,
        ease: 'power4.easeout',
        onComplete: done
      })

    }
  }

}
</script>

というわけで、vue.js特に関係なかったわけですが、
いつまでも昔の書き方で動くと思うなよっていう戒めですね。
気をつけたいと思いました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3
Help us understand the problem. What are the problem?