How use ScrollTrigger to move between Sections

[Seb1337]

I am trying make my Sections Scroll through like in this example, 
but i want to extend the Time between Sections, aswell as have two Sublines.
So if i enter a section the Headline and the first Subline is revealed and if i scroll more the first subline is replaced by the second Subline.  

See the Pen 0b5a30b2352ce90d92727a862259c476 by akapowl (@akapowl) on CodePen

[akapowl]

Welcome to the forums @Seb1337

 

I made the example you posted quite some time ago in a different thread - and I've got to admit, technically it is not 100% correct.

 

They key to changing the durations for something like this is getting an understanding for how durations work with animations on scrubbing ScrollTriggers. I don't think that example would be the best to try and understand how those work as it has a master-timeline that is controlled by the ScrollTrigger with multiple Subtimelines being added to it, for which you will have to adjust the durations of the tweens appropriately to make them work with the duration of the master-timeline - so yeah, things can become rather complicated real quick with this in terms of thinking.

 

So for figuring out how the durations work, it might be better to start things off with one long timeline.

 

Cassie's explanations in these threads are great for getting a better understanding of that.

 

 

 

 

 

 

I went ahead and made another version of that pen, to have it work like something you described although it still might be far off - and with the tweak made to it, it isn't neccessarily easier to understand. I added a factor that you can change, to adjust the overall scroll-duration (and thus speed) of things.

 

If you want to change the 'durations' of the individual tweens in this case, though, you'd have to always also adjust the value of the tweenduration variable accordingly to make it fit properly in the end.

 

See the Pen yLzdqmr by akapowl (@akapowl) on CodePen

 

 

 

As I mentioned, for tinkering with the durations it might be easier to grasp if you work on it as one long timeline, like this e.g.

 

See the Pen dyVBQgX by akapowl (@akapowl) on CodePen

 

 

I hope this will be somewhat helpful. Happy scrolling  

 

[Seb1337]

Hey @akapowl,
this is exactly what i wanted.
But is there a way that i can disabled the Scrub for the Sublines.
They should just move in after scroll and change if scrolled through. But the Animation itself should not be scrollable if they swap.
 

[akapowl]

6 hours ago, Seb1337 said:

But is there a way that i can disabled the Scrub for the Sublines.

 

For that you would have to add another ScrollTrigger for each section, that has no scrub enabled, controlling a timebased timeline.

 

Be aware though, that mixing scrubbed with timebased tweens like in this case might give weird results, e.g. depending on how fast users scroll when the overall fading-in will still be scrubbed through. 

 

The tricky part in the end will really be getting the timing (with regard to start and enter of the ST) right depending on where exactly you want to trigger the timebased timeline - which I'm afraid will be a bit out of scope for these forums.

 

For how to control timebased tweens / timelines on ScrollTtiggerss you'll want to take a look at toggleActions

 

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

 

 

You could do it something like this with the wrapping .trigger element as the trigger.

 

See the Pen ExbxLzj by akapowl (@akapowl) on CodePen