The landing pages of Apple are popular for their engaging on-scroll interactions. We have incorporated frame-by-frame Lottie sequences on the page of MacBook Pro 14" and 16" models, which animate as users scroll through. We have also adjusted the tabs to work like Apple's and added background videos. Overall, we have built the entire interface, even taking care of responsive details, using Webflow native functionalities to demonstrate what's possible with the platform.
Tabs can also be used in a quite creative way for this area on which there is content above and below the tab's title, something Webflow does not allow to work with by default.
In this scenario, use the tabs as a tool to work. I built links, since by clicking on them we can change from different scenarios, I have put very short screenshots of what could be done in this scenario.
Areas on which there is a moving background can easily be achieved by hosting the video with Webflow and using the native functionality of background video.
One of the most enjoyable parts of the project is animating the computer's opening and turning movements as users scroll through the page. We experimented with two approaches to accomplish this, both utilizing frame-by-frame animation. The first approach involved creating an on-scroll animation where each frame was uploaded as an image and hidden until it was time to display it. This is demonstrated in a certain section of the page, where a frame is initially set with zero opacity at 1%, and then at 2%, the opacity is set to full. We repeated this process for the rest of the frames, starting with frame number 3 and continuing onward.
But we could have taken a different approach for this, using a Lottie file instead. We have used this second approach for other Apple landings (Pro Display XDR, for instance). The idea is the same as we play an animation frame by frame while users scroll, but instead of creating many frames and manually hiding/showing them, we would animate a Lottie file from start to finish. The Lottie file would contain the frames (we transform an MP4 video into a Lottie and optimize it).
An important detail to note is the responsive navigation. Its implementation differs from simply stacking desktop elements to fit.
Implementation for mobile pages, like this one by Apple, often removes some of the desktop animations. The overall mobile experience aims for practicality and simplicity.
Another example of mobile responsiveness is using dropdowns to group links in the footer, instead of shrinking all elements.
Wrapping up a scary, interesting challenge
In summary, Webflow is a useful tool for designing HTML interfaces and animations. So much so, that it even allowed us to create the iconic Apple landing page. Want to explore this project at a technical level? Be welcome to clone it below.
Clone on Webflow
You can use it for learning, experimenting further, or just for having some fun. Enjoy!
.jpg)
.jpg)
.jpg)
.png){kind=icon}
.gif)
.gif)
.gif)
