ScrollTrigger: Unpinning an element using a trigger unrelated to scroll position

[BlyndLynx]

Hello, I'm new to ScrollTrigger and have been reading the docs to determine whether it can accommodate what I'm trying to do. So far, I've not seen what I'm looking for but the feature set seems very rich so thought I'd ask here. What I'm trying to do is create a vertical scrolling experience where sections snap into place that we want the user to focus on (ScrollTrigger accommodates this nicely of course). But some of these sections will contain a game or video. The user should not be able to continue scrolling until they complete the game or finish watching the video. Now the `pin` property accepts a boolean value that could be changed once the game (or video) completes. But there are other sections below the pinned game that need to stay below until the game is completed and scrolling resumes. I understand that padding is automatically added by ScrollTrigger to accomplish this. But if the unpin event is unrelated to scrolling, how would ScrollTrigger know how much padding to add? I could disable scrolling entirely until the game is completed. But I was hoping to allow for background images to continue scrolling so that the user knows the browser hasn't frozen, they just need to complete the game before moving on to the next real content. Is this something Scroll Trigger could achieve? 

[GreenSock]

3 hours ago, BlyndLynx said:

But if the unpin event is unrelated to scrolling, how would Scroll Trigger know how much padding to add?

I'm not sure I follow your question. If an element is pinned for 300px, for example, it would add 300px of padding. 

 

3 hours ago, BlyndLynx said:

I was hoping to allow for background images to continue scrolling so that the user knows the browser hasn't frozen, they just need to complete the game before moving on to the next real content.

This sounds like a logical impossibility to me - how could you allow the user to scroll indefinitely AND have certain scroll positions trigger certain things? I think you'd need to choose one or the other. 

 

ScrollTrigger bases things off of trigger point where the scrollbar hits a start/end value which are pre-calculated in order to maximize performance (we're obsessed with performance around here). 

 

You could disable scrolling and just listen for wheel/touch/pointer events that make something else happen in the background. Just an idea. 

 

If you still need some help, please provide a minimal demo and we'd be happy to take a peek.

 

Happy tweening/scrolling!

[BlyndLynx]

Hi Jack,  Thanks for this reply. Sorry if I wasn't clear. I want the unpin event to be unrelated to scrolling. That is, say an element we want to pin contains a video. Instead of pinning the element for 300px, as you suggested, I want the element to remain pinned until the video is watched to completion. That is, unrelated to scroll position. The user could scroll as much as they want, but until the video completes playing, the container holding the video would remain pinned. Once the video completes, the user is free to continue scrolling to the content below. So the `end` property (or some related property) would not be tied to scroll position but would be listening for a state change triggered by the video api announcing the end of the video. Does that make sense? Is this possible to achieve with ScrollTrigger? 

If this is not possible, I suppose my other questions are moot. But hopefully they both make sense to you now. That is, there would be no "pinned for 300px" to define what the padding needs to be. And "certain scroll positions" would not trigger certain things. Other JavaScript events, not scroll position, would trigger the unpinning. So in theory, the user should be able to continue scrolling indefinitely so long as the flag for continuing is not triggered.

 

I can put together a codepen demo (with pseudocode, since I don't know which properties would enable this) and share it here. But I'm mostly just wanting to know if this is even possible.

Thanks.

[BlyndLynx]

Hi Jack,

 

Here's a quick pen I forked from one of your demos. In this example, I would like to pin the "green" panel until the user click the button. So the unpinning would be unrelated to scrolling. Is this something that is possible with ScrollTrigger? 

 

See the Pen MWmGWgz by mssaxian (@mssaxian) on CodePen

[GreenSock]

The short answer is "no". 

Of course you could use a regular ScrollTrigger to fire a callback that sets your element to position: fixed and basically get it into a pinned state and then you can toggle that off whenever you want. But ScrollTrigger's pinning is very much linked with scroll positioning. 

[BlyndLynx]

 Thanks, Jack. Yes, that's what I ascertained. I ended up going with intersection observer and then disabling/enabling scrolling by adding and removing a css class to the container that sets height to 100% and overflow to hidden -- no library. I used that instead of position:fixed because otherwise elements below the fixed element would continue to scroll past (since there's no value to assign to padding). I was hoping to have some slight movement in the background, so that user can still tell they're scrolling, even though foreground is fixed. But not sure I can do that while no scrolling is occurring -- would have to somehow scroll the bg but not the fg (and still keeping items below the frozen element in place). But I'm closer to what i need at least.