Webflow Interactions Challenge

Pro Display XDR

Hero thumbnail

Only Webflow. Only native interactions.

In 2022 we launched an enterprise to develop the Apple landing pages grouped into their Mac division. The initiative pursued several fronts, including challenging ourselves to use Webflow interactions – native interactions.

Backups on key landing pages within the Mac lineup.

Our enterprise sought to develop a backup on the landing pages of the Apple products belonging to their Mac division : the Macbook Air, Macbook Pro, iMac, Mac Mini, the all-new Mac Studio, the Mac Pro, and also the Apple displays.

Storytelling. Clean design. Neat on-scroll interactions.

Apple landing pages engage. First and foremost, they present readers with a story worthy of reading about the product. In this case, the XDR Display Pro. A clean visual design language boosts the storytelling. And on top of it all, interactions that respond to the user's scroll make it an even more engaging experience.
Thumbnail image

Available for developers, designers, and storytellers.

Our Webflow backend project is wide open and available to creatives to study how Apple treats visual and written storytelling for their products and how their landing pages behave in terms of interactions . It is available for free.

Responsive breakpoints.

We used all of the breakpoints for responsiveness available on the Webflow builder. The Apple landing pages are heavy in animations on desktops and lighter on mobile devices. On mobile, the top side menu and the footer are more than just a size reduction of their desktop counterparts. They are different. This is most notable on the footer, which turns into an accordion on mobile. A tiny detail, right? That's just Apple being who they are. And that's just us caring about the minor details as well.
Thumbnail col pic
Blocks stack vertically on mobile, using EM measures anchored to a VW root block instead of pixels.
Featured interface
Apple's burger menu is more than a simple reduction of its desktop counterpart.
Interface thumbnail
Reaching the footer on mobile uncovers links grouped into toggles.
Thumbnail image

Video, Lotties, and interactions.

Combining Webflow background videos, Lottie files, and on-scroll interactions allowed us to recreate the immersive experience the XDR Display Pro offers visitors. Following what Apple does, the animations work on desktop browsers for sizes up to around 1980 wide. At larger sizes than that the user experience variates slightly.

Outline in a pinch.

In summary: we used Webflow native functionalities to develop the Apple XDR landing page on-scroll interactions, recreating the product immersive storytelling experience we all love.
Hero image
Credits to the brains behind the project development
Daniela C.
Webflow developer
Nayeli V.
Webflow developer
Sebastián Y.
Webflow developer
Diego G.
Webflow developer
Talents behind this presentation
Diana M.
Podcast Host
Diego G.
Podcast Invitee
Santiago G.
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