Easing imitating "Elastic scroll at the end page" effect

[kreativzirkel 43 Likes (Newbie)]

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

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

[OSUblake 9,990 Likes (Superhero)]

How is this activated? If it's for touch, you should look at using Draggable. Check out the scroll demo here...

https://greensock.com/draggable

[kreativzirkel 43 Likes (Newbie)]

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!

[OSUblake 9,990 Likes (Superhero)]

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.

[kreativzirkel 43 Likes (Newbie)]

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.