DEV Community

Jack Harner πŸš€
Jack Harner πŸš€

Posted on


How Does Apple Create Such Stunning Landing Pages?

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?

Top comments (4)

weekendvisuals profile image

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.

jackharner profile image
Jack Harner πŸš€

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.

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.

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