Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kreativzirkel

How to replicate Apples parallax effect on WWDC2019 landing page?

Recommended Posts

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

Link to comment
Share on other sites

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. ?

 

 

 

 

  • Like 2
Link to comment
Share on other sites

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 :D

  • Like 1
Link to comment
Share on other sites

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. 

 

  • Like 1
Link to comment
Share on other sites

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

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

 

Hopefully I understand your logic behind it! :D

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.
×