Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@mksm_wrk

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

More than 1 year has passed since last update.

概要

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特に関係なかったわけですが、
いつまでも昔の書き方で動くと思うなよっていう戒めですね。
気をつけたいと思いました。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mksm_wrk

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?