Webflow 2.0 Interactions for the

Macbook Pro

MacBook Pro landing page by Quo Agency using Webflow
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.
An example of Quo Agency using Webflow's functionalities for tabs in a Macbook Pro landing page
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.
Quo Agency's approach to Apple's MacBook tabs using Webflow tabs
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.
Mockup of Apple animations using background video on Webflow by Quo Agency
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.
Apple computers being animated (Mockup)
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).
The navigation bar of the MacBook Pro landing page, in Webflow by Quo Agency
An important detail to note is the responsive navigation. Its implementation differs from simply stacking desktop elements to fit.
Quo Agency recreated the 2021 landing page for the MacBook Pro using Webflow native functionalities
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.
Mobile implementation of a footer from the Apple Macbook Pro landing page by Quo Agency
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.
Mockup on the Apple + Quo Agency project of the M1 chips being animated

Clone on Webflow

You can use it for learning, experimenting further, or just for having some fun. Enjoy!

It's free, of course.
Your feedback is welcome.
Meant for learning and having fun.
Credits to the brains behind the project development
Webflow developer
Webflow developer
Webflow developer
Talents behind this presentation
Writer and content curator
About us
Support Quo team member headshot
Let's work together
Contact us
arrow icon
We can help with...
UI/UX design
Web development
CMS integration
AB web experimentation
Web and mobile apps
Illustration and animation
Marketing print design
Record to eBook workflows
Remote video production
Color grading
Remote crew assistance
Video and audio editing
Long to short video extraction
Product photo and video
Landing pages creation
Recurrent web maintenance
Packaging design