Share Posted September 19, 2021 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 More sharing options...
Share Posted September 20, 2021 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? 1 Link to comment Share on other sites More sharing options...
Author Share Posted September 20, 2021 Thanks Cassie Now it have an name Intresteing!! Link to comment Share on other sites More sharing options...
Share Posted September 20, 2021 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. 1 Link to comment Share on other sites More sharing options...
Share Posted September 20, 2021 20 minutes ago, GreenSock said: Browsers don't actually allow you to scroll past the end or return a negative scrollTop, for example Good to know! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now