Jump to content
Search Community

How to make elastic text scroll?

pizza0502 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value.

 

Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value.

 

See the Pen mGzGRJ?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

The scroll based effect is a lot more simple as you don't need to use any predefined tween,

 

See the Pen wEYEgo by Sahil89 (@Sahil89) on CodePen

 

  • Like 10
  • Thanks 1
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...