Jump to content

Steven Grimaldo

  • Posts

  • Joined

  • Last visited

Steven Grimaldo's Achievements



  1. 3 years later and i finally figured out what i needed to do, here is a demo with the code: https://codesandbox.io/s/lucid-noyce-l50dq
  2. 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.
  3. @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.
  4. 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!