GSAP ScrollTrigger triggering on mount, not on scroll

Question

I made an animation with a scrolltrigger in line with the example in this codepen.

Trouble is, the animation plays when I load the page and not when I scroll past the intended trigger point.

Does anyone know why that might be? I call the trigger method in mounted, which I think is where the problem lies. But that's how the codepen example did it and the animation didn't trigger on page load. Calling the method in method should only establish that there is a trigger on the page.

I also removed the call from this.animation() inside of the scrollTransition method as I thought that would perhaps be calling and triggering the animation. But removing the brackets makes the scroll trigger markers (and, I'm guessing, the trigger itself) disappear from the screen entirely.

Here's the code:

// 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,
  });

Hey crevulus. If the start position of the ScrollTrigger is negative (i.e. before the user has to scroll) then it will fire immediately. It looks like that's the case here. This is discussed in [the most common ScrollTrigger mistakes](https://greensock.com/st-mistakes/#scrub-load-val). — Zach Saucier, Feb 22 '21 at 19:58

score 0 · Answer 1 · answered Mar 06 '21 at 16:44

It was triggering because I am not returning from my animation() function.

To fix it, you just need to add a return statement.

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

GSAP ScrollTrigger triggering on mount, not on scroll

1 Answers1