Jump to content
Search Community

Easing imitating "Elastic scroll at the end page" effect

katerlouis 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

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

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