Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pizza0502

How to make elastic text scroll?

Recommended Posts

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

https://www.marie-morelle.com/

 

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

 

Thanks!

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 8
  • 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.

×