there are no markers. As it also happens in production code. It is not even an error that happens all the time. But every now and then it will break down.
the site is generated in Vue, so you might say that DOM manipulation happens. However, not from the point where it works to the point where it breaks down, if that makes any sense ? I mean, it works when scrolling, and then it breaks down at some point and you might even have reached the bottom of the page and have scrolled both all the way up and down.
I just read about the refreshPriority. Could it be because that I may have defined the scrolltriggers in the wrong order?
also I'm running two timelines at once where one is in charge of pinning and the other is in charge of the actual animations. I do this because I need the animations to start at "top 90%" and the pinning to happen at "top top".
const tl2 = new gsap.timeline( {
scrollTrigger: {
trigger: this.$refs.membership,
start: 'top',
end: '+=1800',
scrub: true,
pin: true
}
} );
tl2.set( this.$refs.membership, { opacity: 1 } );
const tl = new gsap.timeline( {
scrollTrigger: {
trigger: this.$refs.membershipTimelineTrigger,
start: 'top 90%',
end: '+=2400',
scrub: true,
duration: 1
}
} );
These two timelines start at the same time btw. the second trigger is the first-child of the first trigger. So this feels like a hack, but I couldn't see how else to do it.