GSAP 3+ 动画在 VueJS 项目中不起作用

Question

In my local server (http://localhost:8080/) GSAP animation working properly. Whenever I push the master branch and its build on netlify.com, but the animation not working.

I add the code on my component and mounted properly, but I could not understand why it's not working in production!

CommonBanner.vue

<template>
  <div class="common-banner-area">
    <div class="container-fluid px-5-percent">
      <div ref="jsbannerimage" class="common-banner">
        <img class="img-fluid" :src="ImageUrl" alt="square">

        <div class="banner-content">
          <h1 ref="jstitle">{{BannerTitle}}</h1>
          <p ref="jssubtitle">{{BannerSubtitle}}</p>
        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator';
    import {TimelineLite, Back} from 'gsap/all';

    @Component({
        name: 'CommonBanner',
        components: {},
    })
    export default class CommonBanner extends Vue {
        @Prop() public BannerTitle!: string;
        @Prop() public BannerSubtitle!: string;
        @Prop() public ImageUrl!: string;

        public mounted() {
            const {jstitle} = this.$refs;
            const {jssubtitle} = this.$refs;
            const {jsbannerimage} = this.$refs;
            const imagetimeline = new TimelineLite();
            imagetimeline.to(jsbannerimage, 0, {
                opacity: 0,
                ease: Back.easeInOut, // Specify an ease
            });
            imagetimeline.to(jsbannerimage, 2, {
                    opacity: 1
                },
                '+=0.5' // Run the animation 0.5s early
            );
            const timeline = new TimelineLite();

            timeline.to(jstitle, 0, {
                opacity: 0,
                ease: Back.easeInOut, // Specify an ease
            });
            timeline.to(jstitle, 2, {
                    opacity: 1
                },
                '+=1' // Run the animation 0.5s early
            );

            const subtimeline = new TimelineLite();
            subtimeline.to(jssubtitle, 0, {
                opacity: 0,
                ease: Back.easeInOut,
            });
            subtimeline.to(jssubtitle, 2, {
                    opacity: 1
                },
                '+=1.5' // Run the animation 0.5s early
            );


        }
    }
</script>

Answer 1

Try loading the UMD version of GSAP. You can do so by saying:

import { TimelineLite, Back } from "gsap/dist/gsap";

See the GSAP's installation page for more info.

With that being said, we recommend using the GSAP 3 formatting in which case you only need to import gsap for the code provided. See the GSAP 3 migration guide for more info.