issues with scrollTrigger in Webflow project.
I’m using scroll trigger for multiple sections, some sections have pin and some don’t, I noticed scrollTrigger miscalculate the markers sometimes when page load, until I manually refresh the page the the markers are set in the right place., what could be chasing this ?
Note: I’m using Lenin’s scroll with scrolltrigger.
6 Replies
@Web Bae
@Vhibezfx can you check out this thread and see if it solves your problem? https://gsap.com/community/forums/topic/27307-scrolltrigger-marker-positions-shift-position-animation-sometimes-starts-off-screen/
GreenSock
scrollTrigger marker positions shift position, animation sometimes ...
Hi there, I'm running into weirdness with scrollTrigger and marker positioning. I have a page with 2 components built in Next.js, one is using scrollTrigger to pin an element for a duration (AnimationScrollBlock), and another component fades in some images when the user scrolls to it (ImagesBlock...
Thanks..
Was able to resolve it.
By setting all the images on the page to load with page, instead of the lazy loading default in Webflow.
That’s a cool resolution, if you find the load time is reduced because of it you can try using the ScrollTrigger.refresh() at the end of your page load like they mentioned but with a normal web page you probably won’t notice a difference with eager loading images 🙏🙏
Yeah, I have all sort of method, even used intersection observer to refresh the scroll trigger once you scroll past a point. The problem is scrolltrigger unable to calculate positions when the page loads . Setting the images to load with the page just fix that.
Awesome fix here, definitely going to remember this 🙂 Thanks for letting us know how you got it working!