Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

Share this post


Link to post
Share on other sites

Unanswered question? that's strange.

 

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

 

  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
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. 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×