How to mix scrub animations with non scrub animations in one scrolltrigger timeline?

How To
1

Is there a way to have one scroll trigger timeline with a mix of scrub and time based animations? I need to be able to trigger time based animations within a timeline based on scroll.

For instance when my section reaches the top of my screen, move an image to the left for one second. Then after any amount of time but 300px of scrolling, move another image for three seconds to the right. And then after some more scrolling have a scrub animation. And have it all play in reverse when scrolling back up.

Currently when I have a scroll trigger timeline that isn’t set to scrub, then once the timeline starts all of the animations will trigger based on time, so the scroll end point is basically pointless.

2

Hi,

there isen’t a way because in Bricksforge you cannot have a master timeline with nested timelines and in GSAP you cannot nest scrolltrigger.

Basically it seems that you want something similar to this:
https://codepen.io/GreenSock/pen/eYKoWNX

But if you read you’ll see that it is not so easy to mix them:

So, you can try with bricksforge with 3 different timelines and see if your project is acceptable with that, otherwise you will have to go custom code in the node editor.

If anyone has betters ideas is welcome!