Start/Reverse animation on particular scroll positions

[Bharateshwar]

I want my animation to behave as if it is linked to scroll position, but it should not be paused when user stops scrolling. 
I didn't use scrub as with it the animation is paused when user stops scrolling in the middle of the animation.

Things I'm trying
1. Move title into view when scrollTrigger starts
2. Move the active title out of view when scrollTriggerEnds
3. As soon as the previous active title is out of view, start bringing the next title into view.
4. Title position should not move with scroll.


Things I need help with:

1. Next Title does not wait for the previous title to move out of view.
2. As I scroll, the container of the title moves, and hence the title moves too. Titles should always appear at the same position. (Attached images)
3. I'm not sure if using the onEnter, onEnterBack, ...etc methods is the correct way to do this.

See the Pen PoxKgmG by bharateshwar (@bharateshwar) on CodePen

[mvaneijgen]

Hi @Bharateshwar welcome to the forum! 

 

I've read your question and if I understand it correctly is the issue that your tweens don't know of each other, maybe there is a way to hook in to onComplete callbacks and check if one tween has played to start an other, but my mind then goes to timelines.

 

I've modified your pen a bit so that all the headers are on top of each other in a block that gets pinned. I've written a timeline that tweens through all headers one by one with a label in between. Then in the onEnter callbacks I tween to the label of that particular ScrollTrigger, now it really 'waits' for the next header, because it is a timeline that gets played.

 

There is only one drawback that if you scroll fast it still tweens through each header and has to catch up to the last header, which does not happen in your example. I have to say that we as developers can staring at animations which the vistor of the site will not even notice. I for instance had to really keep scrolling up and down to see what you ment in your pen. So personally I find your a better solution and maybe adding a delay to the on enter tween can be enough? (delay: 0.5, by default tweens have a duration or 0.5, so if you wait 0.5 seconds for the next tween it surely has moved a way already) Hope it helps and happy tweening! 

 

See the Pen XWygvvW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Bharateshwar]

Hi @mvaneijgen, thanks for your reply. 

I tried playing around with both yours and my solution, but none of those are actually doing what I need.

Issue in my solution is that the heading actually moves while scrolling upwards on the page. 👇🏻 (Notice how Title 4 has moved down)

I tried making the headings absolute, fixed but the pin spacer being relative is causing issues.

And issue in the solution that you gave is what you have already pointed out, i.e the play head will do a linear tween. 
I was thinking of setting the progress of the timeline manually when a particular section's scroll gets triggered, but it's causing a jumpy effect.

Would be great if we can get the animation to play as in my solution and the heading to stay in position as in your solution. 
We need a combination of both the solutions 😅.

Regards,
Bharat
 

[Rodrigo]

Hi,

 

I think you should check this video by @Carl

Finally better create the animation without ScrollTrigger first and then, when the animation works exactly the way you want, then add ScrollTrigger to the mix, as @Cassie points out in this tutorial:

Hopefully this helps.

Happy Tweening!

[Bharateshwar]

Hi @Rodrigo thanks for the above.
I saw the videos, tried following the approach of creating animation first and adding scroll trigger later, but not sure if that approach will work for me;
Coz what I need is that the animation should be triggered at specific scroll positions for specific sections.

I've created the actual layout and animation I want for my project.
BUT, it doesn't really match the intended behaviour,  i.e. user should not be able to stop at such a position 👇🏻. (the animation is scrubbed)




Adding my latest codepen below.

See the Pen xxQLjGm by bharateshwar (@bharateshwar) on CodePen

[mvaneijgen]

Ah, now I see your whole layout and idea, maybe using ScrollTrigger isn't the best approach, seen that you don't really want to have things happen on the scroll position, you just want to animate something when the user scrolls. Check out the Observer plugin https://greensock.com/docs/v3/Plugins/Observer the demo below looks like exactly your use case!

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

And her an example where the observers goes over in normal scrolling behaviour when the animation has finished 

 

See the Pen oNdNLxL by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi,

 

I think that if the animation is not working as intended with ScrollTrigger it might not work as intended without it neither. We insist on removing ScrollTrigger a lot of times for the same reason and that reason is that ScrollTrigger just controls the animation based on the scroll position, nothing more. The way your animation behaves should not be related to that, especially since you have just one timeline.

 

Is this the way your animation should work?:

See the Pen XWyaYRb by GreenSock (@GreenSock) on CodePen

 

I removed the ScrollTrigger part and just kept the animation on an endless loop.

 

Happy Tweening!

[Bharateshwar]

Yes @Rodrigo, it is as I need it.
The only thing missing is that user should be able to pause between the sections with the scroll. i.e. current active section's animation should not pause with user pausing the scroll.

Let me try to explain a bot more;
We have 3 sections here. Suppose a section takes an height of 200px, the total height of the animated sections would be 600px.

The intended animation would be:

• First section comes into view normally, and get's pinned when it's top reaches top of viewport.
• First section stays as is until user scrolls 200px, i.e until top of second section touches top of viewport, when this happens the first section moves out of view, and the second comes into view.
• User scrolls 200px more, When third section touches top, second moves out of view and third comes into view.
• If user scrolls past the third section, i.e. 200px more, it should just scroll out of view normally.
• And if user scrolls back to top, everything should work in reverse.

[Bharateshwar]

I've added snapping to this example to explain a bit further.
I want this behaviour BUT it should be smooth like my previous codepen animation, i.e. user is unable to stop in between the animation of a section, but can pause once the active section is in view.

Snapping just adds a lot of jumpiness coz of the delay and snap. 

See the Pen dyQzKEd by bharateshwar (@bharateshwar) on CodePen

 

[Rodrigo]

OK, I get what you're trying to do.

 

So building on top of @mvaneijgen's advice of using Observer in combination with ScrollTrigger that would be one way to achieve it.

 

This example can help you:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen

 

Also this is a combination of ScrollTrigger and the ScrollTo Pluging for layered stuff like this:

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

 

Those examples should provide inspiration for this.

 

A third option would be to create a ScrollTrigger instance for each element so the start of the next ScrollTrigger is the end of the previous:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/previous()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/next()

 

Hopefully this helps.

Happy Tweening!

[Bharateshwar]

Thanks for all the help Rodrigo and mvaneijgen.
I think I finally have what I need only with scroll triggers (though the code might be a bit messy). But I'm still going to give the Observers a try.

And I have one small doubt and would appreciate if I could get an explanation for it.

In the below codepen, in the JS file, I have commented out a set delay, duration and offset that don't work when the page is scrolled at higher speed. 
I wonder why that is. The uncommented values work seamlessly. 

See the Pen poQrMPp by bharateshwar (@bharateshwar) on CodePen

Thanks Again!