ScrollTrigger callbacks with absolutely positioned sections

[stephens]

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: 

 

See the Pen mdMwaxO by StephenScaff (@StephenScaff) on CodePen

 

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.

 

 

 

See the Pen vYJZvMg by StephenScaff (@StephenScaff) on CodePen

[GreenSock]

Sure, you should be able to just embed regular callbacks wherever you want, and then check the ScrollTrigger's direction to know if you should start or stop the video (like if the user is scrolling backwards into a section, it should start playing, but if you hit the same spot scrolling forward, it'd stop), like this: 

See the Pen oNeevwZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Did I understand your goal correctly? 

[stephens]

@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?

 

See the Pen NWvweYN by StephenScaff (@StephenScaff) on CodePen

Thanks again for your help!

 

[GreenSock]

Ah yes, that's because the playhead doesn't go PAST that spot in reverse. In other words, that callback is at the very END of the timeline, so it fires when the playhead arrives there but when you start going backwards from there it won't fire again (it shouldn't). Not a bug. It's just a logic thing. But you can easily remedy that by adding a tiny empty tween at the end so that the playhead can go PAST the callback (slightly), thus when it goes in reverse it trips it again: 

See the Pen eYEyjgw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better?