stephens

Hi guys. I can report having the same error on route change of a Next.js app (Next Router, React 17.0.2, Next 11.1.2, GSAP 3.8.0). It doesn't occur on a forced reload, just when navigating away from the page via Next router. If I removed the Pinning, error went away. Note, I was using Refs for all dom targeting, and a custom useLayoutEffect hook I wrote for Next (which only runs Isomorphically). The hook had cleanup deps defined and killing ScrollTrigger on unmount didn't prevent the error. In the end, the fix was to ensure the target ref was NOT on the component's parent element. The target ref seems to need a wrapper / parent so the injected pin spacers are actually child elements of the component. Interestingly, this also improved render times when navigating to the page. Still investigating specifics.

@GreenSock Thanks so much for your help. You understood my goal (despite my overly verbose description ). Seems like the solution was to - Move the absolute positioning from each section (scene) to the wrapper. - Using timeline's .add() with scroll direction logic to call methods to play/pause the targeted video element. I do have one additional question. The pen below has a solution fully implemented. However, the logic calling the startVideo() function doesn't fire on the last section when scrolling back up. Instead, I used scrollTrigger's onEnterBack() callback and passed a reference to the last section. Just wondering if that's the right move, or if there's a way to keep the video start/pause calls entirely within the .add() logic? https://codepen.io/StephenScaff/pen/NWvweYN Thanks again for your help!

Hi! First, thanks for all your work on such an amazing lib that makes the web a better place. Have dabbled with GSAP, but new to ScrollTrigger. I'm having an issue using scrollTrigger callbacks with absolutely positioned sections. So, I've built a narrative-driven pinning scroll interaction, that has a series of sections with text positioned left, media (image or video) positioned right. As successive sections enter on scroll, the pinned media elements fade in/out, while the pinned text elements fade in/out with some y translate. The process reverses on scroll up. To accomplish this I have a timeline with a scrollTrigger, with .from()s for entering, .to()s, for exiting. This was my initial approach, with just images for the media: https://codepen.io/StephenScaff/full/mdMwaxO However, as mentioned, I want to support video, which means I need a way to start/pause the video elements in view. Initially i though i could use the timeline callbacks, onStart, onCompletebut they only seem to fire on scroll down, not scroll up. I've also tried to create a scrollTrigger for the video elements, using onEnter, onEnterBack, onLeave, onLeaveBack., as shown in the embedded codepen below. However, my interaction seems to require that each section is absolutely positioned, which is confusing scrollTrigger because all the sections are essentially positioned top: 0 for the entire interaction (I believe). The markers are only positioned on the first video containing section/scene. If I remove the absolutely positioning, the markers relatively position on each scene, and the callbacks work. Not sure how to resolve this. Any insight would be greatly appreciated. I just need to start / pause video as they enter / leave the viewport, on scroll down and up. Perhaps my overall approach could be done better? Thanks so much for any insight you could provide on the matter.