Reverse ScrollTrigger animation when reacing end point

[Akash Ranjan]

Hi,

 

I am trying to achieve an effect where the font size increases as the animation progresses (like just what scrub do) and decreases as the font size of next element increases. But i am unable to achieve this effect with SCRUB property.

 

I tried many methods but i am not sure how to achieve it. Can you guys please help me.

 

Thanks alot.

See the Pen mdjLbOa by akashrwx (@akashrwx) on CodePen.

[Cassie]

Hi there - those tweens that you're calling in the callbacks don't inherit any scrubbing from the scrollTrigger.

You're just saying 'on enter, fire this animation' So it's a duration based animation - not tied to the scroll at all.

If you want to tie animations to the scroll you'll need to associate a timeline or a tween with a scrollTrigger, like this -

See the Pen yLqjePW?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Just a note that animating text-size isn't very performant so you might want to take a look at using scale instead.

Hope this helps!

[Akash Ranjan]

Thanks @Cassie this worked fine. I tried many ways but did not know that I can do it this way also. Many thanks