Jump to content
Search Community

Scroll ends - nice ScrollAnimation

lucky111 test
Moderator Tag

Recommended Posts

I have seen a kind of very nice UX when you scroll to the top of a page in several apps and pages.

The page expand and bounce back ....

Do you guys know what I mean

Has this behavior a name in the UX world?

Is it possible to get at web page to behave like this using ScrollTrigger??

Maybe someone has done this already, but I don not know what to search for, becouse I don't know what it is called.

In this movie clip from my phone on Swedish TV app you can see this nice behavior.

https://ext.dn.se/qs/widgets/test/test.mp4

Link to comment
Share on other sites

Hey Lukas - I've heard this called called overscroll, rubberbanding and overbounce

A lot of the time this is native behaviour that's device/browser dependant.
https://developers.google.com/web/updates/2017/11/overscroll-behavior
 

What you'd need to do is to detect a negative scroll offset and link an image scale to that. The missing part for me is how to detect that number...

With ScrollTrigger we can get the scroll position but it doesn't return a negative value if it goes past the top - neither does the native scrollTop()

 

See the Pen yLXjNjm?editors=1111 by GreenSock (@GreenSock) on CodePen


Maybe @GreenSock knows a scrollTrigger route to get a negative offset?

  • Like 1
Link to comment
Share on other sites

Yep, that's a native overscroll-behavior. Browsers don't actually allow you to scroll past the end or return a negative scrollTop, for example. But you could certainly mimic that behavior with a bunch of custom code that essentially uses a transform: translateY() to shift the entire <body> around and then of course you'd also have to scale the image at the top accordingly, use momentum to smoothly return things to their native position, etc. There's no simple automatic switch to magically have all of that behavior you described, at least not in normal web browsers.

 

If you need help building something like that, you could either contact us about paid consulting or post in the "Jobs & Freelance" forum. 

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