GSAP ScrollTrigger 在安装时触发，而不是在滚动时触发

问题描述

我根据 example in this codepen 制作了带有滚动触发器的动画。

问题是，动画在我加载页面时播放，而不是在我滚动超过预期触发点时播放。

有谁知道为什么会这样？我在 mounted 中调用了 trigger 方法，我认为这就是问题所在。但这就是 codepen 示例如何做到的，并且动画没有在页面加载时触发。调用方法中的方法应该只建立页面上有触发器。

我还从 this.animation() 方法内部的 scrollTransition 中删除了调用，因为我认为这可能会调用和触发动画。但是删除括号会使滚动触发器标记（我猜是触发器本身）从屏幕上完全消失。

代码如下：

// HelloWorld.vue
<template>
  <div class="empty"></div>
  <div class="hello" ref="hello">
    // content
  </div>
  <div class="empty"></div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { gsap,Power3 } from 'gsap';
  import { scrollTransition } from '../utils/transitions/scrollTransition';

  export default defineComponent({
    name: 'HelloWorld',props: {
      msg: String,},methods: {
      animation() {
        gsap.from(this.$refs.hello,{
          autoAlpha: 0,duration: 1.2,ease: Power3.eaSEOut,y: 400,});
      },scroll() {
        scrollTransition(this.$refs.hello,this.animation());
      },mounted: function () {
      this.scroll();
    },});
</script>


// scrollTransition.ts
import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export const scrollTransition = (
  trigger: HTMLElement,animation: gsap.core.Animation,props?: Object,): gsap.plugins.ScrollTriggerInstance =>
  ScrollTrigger.create({
    trigger,animation,markers: true,start: 'top 50%',toggleActions: 'play complete none none',...props,});

解决方法

它被触发是因为我没有从 animation() 函数返回。

要修复它，您只需要添加一个 return 语句。

animation() {
  return gsap.from(this.$refs.hello,{
    autoAlpha: 0,duration: 1.2,ease: Power3.easeOut,y: 400,});
},