Jump to content
Search Community

Reverse ScrollTrigger animation when reacing end point

Akash Ranjan test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...