How to replicate Apples parallax effect on WWDC2019 landing page?

[katerlouis]

I guess I‘ve seen this effect somewhere else already, but got reminded now that I saw it on the homepage after the WWDC 2019

 

so if you go to www.apple.com right now and play around with the scroll, you‘ll notice that the animations don‘t stop when you hardly interrupt the scroll. It feels like the velocity you created with your scroll is not lost. 

 

Another thing I noticed (or atleast imagine..) that the animation can get only so fast, which is amazing when you scroll like a mad man to the top. Thats not uncommon with such long pages these days.

 

A library like scrollmagic only lets you couple a tween tightly to the scroll position or trigger it at a certain point. But the dynamic playhead behavior on the apple page is awesome! 

 

I fear there are already threads talking about that, and I‘m just too dumb to find them..

but anyhow: how would you approach that?

 

 

Thanks!

 

Louis

[OSUblake]

This thread is probably the best you're going to find on here for momentum.  I'm done answering questions about it, so it's there for educational purposes only. ?

 

 

 

 

[katerlouis]

Thanks for the thread!

 

The thing is, that the "smoothness" is only applied to the parallax effect. The scrolling itself feels native to me. Responsive and snappy as expected.

I'll look into the thread this evening; I probably can apply the "smoothness"-logic only to the parallax scene

 

So thrilled to try this out

[OSUblake]

9 minutes ago, kreativzirkel said:

The thing is, that the "smoothness" is only applied to the parallax effect. The scrolling itself feels native to me. Responsive and snappy as expected.

 

Yeah, those demos were set up to make the whole page scroll smoothly, but the scroller file can be reworked to only animate elements within the page. It could also be reworked to limit how fast something can be moved.

 

If you really need help, I can probably point you in the right direction. 

 

[OSUblake]

Also, I just came across this today. I haven't really looked at it, but it might be useful.

 

https://github.com/min30327/luxy.js

 

[katerlouis]

Yeah thanks, I've also stumbled upon luxy, but saw the whole page scrolling smoothly and went on

– I'll see what I can do; unfortunately not today

 

Hopefully I understand your logic behind it!