Jump to content

Steven Grimaldo

Move element based on window scroll position with easing

Recommended Posts

I'm trying to test out a scroll hijacking method I saw on http://www.adidas.com/us/climazone. On that page, they have a fixed position container with everything in it absolutely positioned and on page scroll they translate3d the elements up -Y scroll position which I can do but they key ingredient they add is easing to that scroll tracking. So as you scroll the elements follow "recreating the scroll effect" but upon release slowly ease into their final place which is the end Y scroll position.


I've found this StackOverflow question, https://stackoverflow.com/questions/25056769/how-to-add-easing-to-parallax-movement,  where it talks about javascript easing mixed with parallax, however, I can't seem to figure out how to apply it to what I'm doing or what I want my end result to be. I also found this JSFiddle where it adds easing based on mouse movement that I thought might be helpful to use pieces from for easing, http://jsfiddle.net/74mnpgs7/4/.


I've added a link to my current CodePen example with my starting point, any help achieving/deconstructing what Adidas Climazone is doing to add easing to their scrollY transforms would be eternally grateful! Another demo I did on JSFiddle is here: https://jsfiddle.net/416ne38h/5/


Bonus if I can use GSAP for this!



See the Pen gRdbBZ by srgrimaldo (@srgrimaldo) on CodePen

Link to comment
Share on other sites

  • 3 months later...

Unanswered question? that's strange.


Take a look at following thread, it must be what you are looking for.


  • Like 1
Link to comment
Share on other sites

@01ivr3@Sahil - While that approach is a lot closer to what I'm looking for and to what you see when you click through to the iPhone X Page, it is not exactly what I need nor what the effect does.


The Example being referred to in the other GreenSock post was to show ease of entire page scroll, not element based. As you see in my post to the Addidas website and on the iPhone X page here: https://www.apple.com/ca/iphone-x/ - the scroll is normal however some elements on the page have easing, not the entire page.

Link to comment
Share on other sites

Have you tried ScrollMagic? It can be easily achieved with ScrollMagic and GreenSock. In ScrollMagic you can set duration for animations, it causes your animation to progress based on scroll. 

Link to comment
Share on other sites

Following is demo I created today for parallax effect which triggers after mousemove event ends with slight delay of 200 milliseconds. You can apply similar logic along with ScrollMagic to get desired effect.


Right now checking on mobile, you can see that once event ends there is slight odd movement by elements that indicates that easing effect is added when scroll ends. 


See the Pen wrVEOj by Sahil89 (@Sahil89) on CodePen


  • Like 2
Link to comment
Share on other sites

  • 9 months later...

that last comment isn't even related to my original question @Sahil, feel free to start your own post with a new topic and tutorial if unrelated.

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.