claudioirl

<div ref={divTrigger} className="waffle-container"> <svg ref={svg} /> <div className="div-boxes-container"> <div ref={action1} className="div-box" /> <div ref={action2} className="div-box" /> </div> </div> So I have this code right now. The goal is for the svg to stop in the middle of the screen and the point is that the rest of the following HTML body will also lock for around 200px of scrolling. I also want to trigger something at around 75px and 150px of scrolling so that's why I added the action1 and action2 divs (red boxes) The problem that I'm having right now is that even if the ScrollTrigger animation is working, the rest of the document (black boxes which is text) continue to scroll behind the svg, while I would want to basically pin the whole page until the last red box reaches the end trigger. Any help please, or maybe Im overcomplicating. I basically just need: whole page to stop when the svg reaches the middle I get around 200px of page freezed I'm able to run a function when the scroll reaches 50% and 75% Not that important but also run on scroll back (when it goes from 75% and 50% downwards) Thank you for any help btw