I created an animation with a scrolltrigger following the example provided in this codepen demo.
The issue I'm facing is that the animation starts playing as soon as the page loads instead of triggering when I scroll past the specified point.
Any ideas on why this might be happening? I have the trigger method called in the mounted section, which I suspect is causing the problem. However, that's how it was done in the codepen example and the animation did not autoplay there. Having the method called in mounted should only set up the trigger on the page.
I also tried removing the call to this.animation() within the scrollTransition method thinking it might be triggering the animation. But omitting the parentheses makes the scroll trigger markers (and probably the trigger itself) disappear from the screen entirely.
Here's the snippet of 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,
});