Jump to content
GreenSock

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

Easing imitating "Elastic scroll at the end page" effect

Recommended Posts

Hi guys,

 

you all know the overscroll-rubberband-style effect of Safari, when you try to scroll over the pages boundaries. I want to imitate that with a simple Tween.

But I can't figure out the correct easing, so it feels exactly like it.

 

Hope the easing experts can replicate a correct easing.

 

 

Thanks!

René

 

 

 

PS: I'll catch up with the rest of the forum soon; I first needed vacation from this project :D

See the Pen jBxOKV by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

It is activated one time by a swipe or by pressing arrow up / down. Not dynamically by dragging as far as one can.

All I'm looking for is a correct CustomEasing

 

So far I have this easing and am not quite satisfied

ease: CustomEase.create("custom", "M0,0,C0.01,0.592,0.272,1,0.5,1,0.5,0.616,0.632,0.012,1,0")

(updated CodePen aswell)

 

 

Thanks!

Link to comment
Share on other sites

I don't know how well an easing will look as the overscrolling effect is physics based. You're just going to have play around with that until you find something that looks good.

 

But draggable isn't for dragging as far as one can. Go check out that demo again. Lock the axis, and then flick it. It works perfectly with a swipe.

  • Like 1
Link to comment
Share on other sites

I know it's a trial and error thing.

 

But I hoped a skilled and experienced animator has already done something similar and could create a way better fitting easing in 10 seconds. :)

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.
×