katokalen

Hi all - looping back on this. I pulled this back into my next.js app (using Contentful as the CMS) and I determined that the issue I was seeing was that my component would initialize, THEN the content from Contentful would pop in, and then the heights of my animations would be incorrect as they had already initialized. I couldn't find a good fix for this aside from reinitializing my animations after the content came in using setTimeout. But definitely seems to be more of a Next.js configuration issue then anything with GSAP.

Ok on my side I've made the quick adjustments you recommended in your first comment to my minimal demo (I will refactor the imagesBlock animation to use .batch() at a later date, thank you for that). I've moved the registering ScrollTrigger check to the parent page (case.js) and removed it from the components. Not sure if you saw my question above about whether this needs to live inside _app.js or is this is fine in the parent page? I'll leave it in the parent page for now as it appears to be working. I've added ScrollTrigger.refresh() to the parent page (case.js) inside its UseEffect instead of the components and this appears to have fixed the issue! Thanks for the help, if Rodrigo has any feedback would love to hear it, otherwise I think this is working.

Thanks Zach, so just to be clear, I should be calling ScrollTrigger.refresh() on unMount inside of my UseEffect for each component? Or where do I add this exactly? So like this? useEffect(() => { let c1 = gsap.timeline({ scrollTrigger: { id: "screen", trigger: trigger.current, pin: wrapper.current, scrub: 1, markers: true, start: "top top" } }); c1.to(img1.current, { duration: 2, yPercent: -70, ease: "power4.inOut" }); // Need to unmount these return () => { ScrollTrigger.refresh(); // New Line c1.kill(); }; }, []); I can make these other adjustments, should the gsap.registerPlugin(ScrollTrigger);be inside of _app.js, or the parent page where the components are imported (like case.js)?

Yes I have. I also have been scouring the greensock forums for tips & tricks with React hooks and making sure to register my scroll trigger instances, kill them on unmount, and also try to refresh them to get the correct values. The forum has been a great help but now wondering if it’s something in my actual pinning animation or a missing CSS spacer that might be the problem? Looking forward to your insight once you’ve looked at my minimal demo.

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). When I click between navigation pages and then back to the "Case" page, sometimes the markers seem to be in the correct position, sometimes they aren't. The same thing appears to happen when I do a hard refresh on the page. Sometimes they are correct, other times they aren't. When they aren't in the correct position the animation for the fading images has already completed before I actually get to that section of the screen. Here is a url to see the issue in action: https://3qfnr.sse.codesandbox.io/case Try doing a hard refresh on the page and see if the marker position for images-1 and images-2 move around. Click to another page and then back to see if the markers move. Screenshot below as well showing what I see when the position is calculated incorrectly and correctly. And here is the codesandbox link to see the code: https://codesandbox.io/s/eager-banach-3qfnr (click on the Case Study link in the nav) As a test, when I move the AnimationScrollBlock component to be underneath the ImagesBlock component, things work as expected. I'm sure it's something dumb but I'm stumped, would really appreciate any insight you might have! Thank you!