theonlyjazzer

@Rodrigo I may well be the happiest person on planet earth right now. I've spent over 3 whole days working on this issue and your post fixed it for me, I actually hadn't seen this code before but it works. THANK YOU!!!!

Hello, I have an issue with my code. I have 4 sections each a height of 100vh, I'm trying to scroll between them. My "onEnter" trigger works fine, but when scroll back up through the sections I need an OnEnterBack trigger. My problem is that when I add the second trigger it works fine if I scroll very slowly between the sections, but if I speed up the page completely freezes. Here is my code : export const ScrollManager = (props) => { let sections = gsap.utils.toArray(".panel"); useLayoutEffect(() => { let ctx = gsap.context(() => { function goToSection(i) { gsap.to(root, { scrollTo: { y: i * innerHeight, autoKill: false, ease: "Power3.easeInOut" }, duration: 0.85 }); } sections.forEach((eachPanel, i) => { ScrollTrigger.create({ trigger: eachPanel, scroller: "#root", onEnter: () => goToSection(i), }); ScrollTrigger.create({ trigger: eachPanel, start: "bottom bottom", scroller: "#root", onEnterBack: () => goToSection(i) }); ScrollTrigger.defaults({ markers: false }); }); }); return () => ctx.revert(); // <- cleanup! }, []); }