DEV Community

loading...

How Does Apple Create Such Stunning Landing Pages?

Jack Harner πŸš€
I'm Jack! I'm a Freelance Developer. I have experience with WordPress, Shopify, BigCommerce, React, Linux Admin, & More! Ask Me Anything!!
・1 min read

Does anyone have any insight on how they pull off the scroll based animations on the new iPhone XS landing page?

My coworker found ScrollMagic which seems to do the trick.

Any other ideas?

Discussion (4)

Collapse
weekendvisuals profile image
T

I didn't dive to the code at this point however I remember that in the past they did use a video for 3D animations. And scrolling was just playing the video timeline forward and backward.

Collapse
jackharner profile image
Jack Harner πŸš€ Author

A quick peek through the inspector yesterday showed me that they (for the part in the gif) had all three phones as three different elements that were getting moved around.

Collapse
niorad profile image
Antonio Radovcic

Binding positions to scroll-offsets, using text, videos and transparent images mostly.
The real challenge is not the how, but the what. Web/Motion-Designers, developers, marketing need to work closely together for a good result. Apple is obviously good at this.

Collapse
kshr profile image
Keshar Wakharkar

I need help with one of the animations I saw on iPhone XS landing page. Can someone please help on how to achieve a similar animation?
Reference : I have uploaded the video on Google Drive, Link: video-link