Patsch36's post in GSAP Scroll-Trigger in vue-project does work properly in dev- server but in production, all animation are on reload page was marked as the answer
Hello,
i used gsap like this:
<script>
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.core.globals("ScrollTrigger", ScrollTrigger);
export default {
mounted: function () {
this.scrollAnimation();
},
methods: {
scrollAnimation() {
const gs = gsap.timeline({
scrollTrigger: {
trigger: ".card",
start: "-50% bottom",
toggleActions: "restart none reset none",
},
});
gs.fromTo(".card",
{
y: innerWidth * (0.2),
opacity: 0,
duration: 0.8,
stagger: 0.2
},
{
y: innerWidth * (-0.001),
opacity: 1,
duration: 0.8,
stagger: 0.2,
});
return () => {
gs.scrollTrigger.kill();
}
},
},
};
</script>
On my npm run serve- server, all the animation work properly when getting on viewport.
But if I build the page and put it on github pages, all animation get started when reloading the page.
Is there any solution for this?
