Hi, i have the following issue: I am making a Website using Vuejs and would like to use the ScrollTrigger in a sub-page. On this sub-page images should be revealed on scroll using the ScrollTrigger and toArray. However for some reason the starting point "top bottom" is only set properly for the first image at the first visit of the site. On all following images the start trigger is kind of the same as the first one, which shouldn't be the case.
If i reload the page or visit it for the second time, everything works properly and the start and end triggers are at the right place. I don't know whether this i a vue, webpack or gsap bug, or do i miss something?
How it should look like and does on reload. On first load
mounted() {
gsap.utils.toArray(".anim").forEach(anim => {
gsap.from(anim, {
scrollTrigger: {
start: "top bottom",
end: "top center",
markers: true,
scrub: 1,
trigger: anim
},
y: 120,
opacity: 0.3
})
})
}