Hello,
I have a very simple scrollTrigger animation on an iterated component.
Everything works fine on fist load. But when I reload the page, nothing works anymore. To test it, I've reduced all my script to gsap.set autoalpha 0, and it's the same : works fine on first load, but disarmed on refresh.
my code excerpt : (sorry it would be a real mess to emulate it on codepen) :
<template>
<div id="home" class="bg-[#ffffff] relative mx-auto flex flex-col overflow-x-hidden ">
<div class="flex flex-col mx-auto justify-around items-center w-full">
<stories-square-line class="targetX" v-for="(i,index) in stories" :pos="index % 2 !== 0" :key="index" :theme="i.slug" :content="i.content" />
</div>
</div>
</template>
<script>
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js'
export default {
mounted () {
gsap.registerPlugin(ScrollTrigger)
gsap.utils.toArray('.targetX').forEach((comp, i) => {
gsap.set(comp,{autoAlpha:0})
// gsap.fromTo(comp, {autoAlpha:0},{autoAlpha:1, duration:"2",
// scrollTrigger:{
// toggleActions: "play complete reverse reset",
// trigger: comp,
// start: "top window.innerHeight/4",
// onEnter: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
// }
// })
})