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:
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.