Animation sequence without scrub

[Marco Rodrigues]

Hi.
Been having some trouble creating an animation sequence without scrub.
My idea of the animation on the codepen above, is that the on-scroll animation should fade-in/out headlines, zoom-in (into screen) the last arrow, and then sequently in the future show more headlines. Problem is about timing and when one or the other should fade-out for the next one to fade-in.

This would be the ideal sequece:

1. First headline fade-out once the 3rd arrow reaches center of screen;
2. Second headline fade-in right after;
3. Second headline fade-out when about to reach the last arrow;
4. Fade-in third headline once the last arrow is already zooming;

With scrub I managed to do it using position parameter, but I want the animation to be triggered at once without scrub.
 

See the Pen VwdXdYK by marcorodriguesdev (@marcorodriguesdev) on CodePen

[Cassie]

Heya! So you're wanting to combine scrubbed and non-scrubbed animations. This is a common hurdle.

This thread and answer should get you on the right track

 

[Marco Rodrigues]

15 hours ago, Cassie said:

Heya! So you're wanting to combine scrubbed and non-scrubbed animations. This is a common hurdle.

This thread and answer should get you on the right track

 

Yes, managed to solve it using the approach shown on that thread.
Thanks a lot!
My bad for creating a new thread about this, was using the wrong keywords to search in the forum, should've looked for "combining scrubbed and non-scrubbed animations/scrolltrigger"

[Cassie]

You don't know the right words until someone tells you! Happy to have been able to help.