Jump to content


How to make elastic text scroll?

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

Hi, recently I stumbled upon this website and quite impressed with the elastic text effects when the mouse moves up and down.



I wanna ask is there any example that teaches how to achieve this with mouse scrolling instead?



  • Like 1
Link to comment
Share on other sites

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

Great job, Sahil. love the demos!

  • Like 2
Link to comment
Share on other sites

I think @Sahil has found a way into the "Blaketrix". He grows more powerful every day. :ph34r:


Excellent work! ?

  • Like 2
  • Haha 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.