ScrollTrigger Expected Behavior Across Multiple Timelines (Possible Bug)

[Steve Giorgi]

I will absolutely take the time to replicate this in a test environment if this not expected behavior.  I didn't want to spend hours if this is extreme edge case and/or expected behavior:

 

I have a master timeline and several other ScrollTriggers connected to one-off timelines (no timeline shares conflicting ScrollTriggers, I know this is a no-no).  When I set snapping on one of those timelines that is not connected to the master, the snapping also controls the master and forces it to tween/ease between labels.  I know for a fact the ScrollTriggers are not crossing over via timelines as they are triggering their respective timelines correctly and one is scrubbing and the others are not.  However, the non-scrubbing ScollTrigger snapping parameter is controlling the master timeline/ScrollTrigger; is this expected?

 

This behavior is between a parent and child component in React.  If this is expected behavior do I have any other options?  I'm trying to keep a ScrollTriggered event/element in view until the user's next interaction (such as their next mousewheel event); I would think this would be accomplished with labels/snapping.  I believe I can create an additional timeline/tween for the out event but it seems like there must be a better way.

[Cassie]

2 hours ago, Steve Giorgi said:

When I set snapping on one of those timelines that is not connected to the master, the snapping also controls the master and forces it to tween/ease between labels. 

This bit's confusing me a little - do you have a timeline nested inside a master timeline?

I can't imagine why a timeline would be snapping a completely unrelated timeline, could you put together a small reduced test case in codesandbox or codepen?

[Steve Giorgi]

I have timelines nested inside the master timeline but none of them are associated or connected to any other ScrollTriggers.

 

I absolutely understand you have to avoid nesting a ScrollTrigger within a timeline or tween that is controlled by another ScrollTrigger.  I have a ScrollTrigger connected to a timeline that is isolated and separate from the master timeline and any timelines associated with the master timeline.  Yet, the snapping on this isolated timeline is causing the master timeline to also snap.  I suspect it has something to do with the useEffect React hook.  I'll check to see if I'm doing proper cleanup in the useEffect and if it's not an error I have overlooked.

 

I have to put together a test case for another post, I'll tackle this at the same time.  In the meantime, is there anyway to stop a non-scrubbed ScrollTrigger and resume it once scrolling has resumed or do I need to setup a second ScrollTrigger?  I'm looking at pause(), resume() but it would require using a separate callback to detect when the user has resumed scrolling.  I just want to trigger a text reveal, stop, and hide the text when the user resumes scrolling.

[Cassie]

28 minutes ago, Steve Giorgi said:

I just want to trigger a text reveal, stop, and hide the text when the user resumes scrolling.

This sounds pretty complex. What if the user doesn't stop scrolling? Surely the text would just flash and then immediately hide?

Maybe showing the text when you enter a section and hiding it when you leave or enter another section would make more sense?

Pretty much anything is possible though - you just have to write the right code! This is why we ask for minimal demos. It's impossible to just give people code snippets without context.
 

 

[Steve Giorgi]

Yes, if you didn't have a gap/delay between the reveal/hide tweens then they would definitely scroll right past the text.  This use case has to do with scrubbing a separate timeline parallel to a timeline with non-scrubbed animations (animations that you wouldn't want to necessarily be stopped mid-stride such as text reveals).   They are scrubbing an animation and text is being revealed.  I think I can kill two birds with one stone with this test case; will get it setup soon.

[Steve Giorgi]

It's very similar to using call() to trigger non-scrubbed animations from your scrubbed timeline to carry out a timed animation, one that you don't want scrubbed, but I have the timelines working parallel to each other.  It's very clean and convincing but I'm running into a couple of issues.

[GreenSock]

Hey @Steve Giorgi. I'm having a really tough time mentally grasping and visualizing what you're describing, so a minimal demo will definitely increase your chances of getting a solid answer

 

You can't pause()/resume() a ScrollTrigger but you can disable()/enable() it. That question concerns me a bit, though, since it seems like there could be logic issues you'll run into if you're unhooking and then re-hooking things to the scroll position. Maybe it's fine. We'll see once you post the minimal demo. 👍

[Steve Giorgi]

I wanted to emphasize that I was not crossing ScrollTrigger timelines/tweens.

 

An isolated ScrollTrigger's snapping is causing another ScrollTrigger to also snap into place.  The only common thing they share is a child component.

 

I'm trying to build a test case now.

 

 

[GreenSock]

6 hours ago, Steve Giorgi said:

An isolated ScrollTrigger's snapping is causing another ScrollTrigger to also snap into place.  The only common thing they share is a child component.

This sounds like the correct behavior to me (if I'm understanding you correctly). 

 

When a ScrollTrigger "snaps", it literally alters the scroll position of the page/scroller - it doesn't just move the playhead on the animation. Otherwise, imagine what would happen when the user started scrolling again - the animation playhead and scrollbar positions would be out of sync and the playhead would suddenly jump. 

 

So if you've got one ScrollTrigger that's snapping and consequently moving the scrollbar position, that change would of course affect any other ScrollTriggers within that range. 

 

For example, let's say scrollTriggerA starts at 100 (scroll position) and ends at 500 and scrollTriggerB starts at 200 and ends at 600. So they overlap. If scrollTriggerA snaps to a scroll position of 350, then of course scrollTriggerB would also reflect that new scroll position of 350 (so I suppose you could say it "snaps" too in one sense). 

 

Does that clear things up? 

[Steve Giorgi]

@GreenSock Yes, I very much appreciate the detailed explanation.  That makes perfect sense.

 

I'll continue to put my demo together because the dilemma I'm facing is showing a complex story unfold with scrubbing, but having parts of the story such as the text reveals not controlled via scrub.  I know I can do this by looking at the ScrollTrigger position/direction and call timelines that are non-scrubbed, but when going in reverse they exhibit strange behavior (not playing at the right times even when setting the position).  I was hoping to have a ScrollTrigger or many ScrollTriggers running in parallel to my master timeline controlling each of the text reveals or things that you wouldn't necessarily want being stopped in mid-stride --- I don't want a user seeing text half on the screen with 0.2 opacity; I want those things to be fluid while they still control the props/objects in the story via scrub so they reveal and dictate the flow of those items.

 

Once I have my demo stripped down I'll put up a different question/post.  Thanks again.

 

 

[Cassie]

I usually set up one scrubbed timeline and then lots of smaller triggers for the elements that need to be animated in with a duration.

The timelines don't have to be nested or triggered by the main timeline - they can just be triggered by elements coming or leaving the viewport.

 

Look forward to seeing your demo, this sounds like a fun project.