Erik_ Posted June 15, 2022 Share Posted June 15, 2022 How to reset ScrollTrigger animation start/end positions after a change in another element's height? I have a large heading that a smaller heading animates over on scroll both above and below an image that can be resized. When the image is resized the ScrollTriggers for the headings below the image are not recalculated. (They are if the window is resized.) I tried ScrollTrigger.refresh(true)with and without adding true, but that does not work. Using setTimeout works, but is that the correct way to solve the problem? setTimeout(() => { console.log("refreshing") ScrollTrigger.refresh(true) }, 500) See the Pen LYexeam?editors=0111 by EOJA (@EOJA) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 16, 2022 Solution Share Posted June 16, 2022 If I understand your question correctly, the problem is that you're calling ScrollTrigger.refresh() BEFORE you actually change the height. You need to call it AFTER everything has finished changing so that it can recalculate properly. So just drop it into an onComplete in your animation: gsap.to(box.current, { height: "1000px", onComplete: () => ScrollTrigger.refresh() // <- magic }) Does that help? 1 Link to comment Share on other sites More sharing options...
Erik_ Posted June 16, 2022 Author Share Posted June 16, 2022 @GreenSock Thanks, that was the problem. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now