Webflow Interactions Challenge

Pro Display XDR

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.
Available for developers, designers, and storytellers
Our 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.
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.
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.
Bloscks stacks up vertically on mobile, using EM measures anchored to a VW root block instead of pixels.
A burger menu that is more than a simple reduction of its desktop counterpart.
Reaching the footer on mobile uncovers links grouped into toggles.
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. Larger than that, the user experience variates slightly.
Outline in a pinch
We used Webflow native functionalities to develop the Apple XDR landing page on-scroll interactions, recreating the product immersive storytelling experience we all love. This is all part of a backup of the entire landing pages under the Mac lineup.
⭐ Credits to the brains behind the project development
Daniela Cárdenas
Webflow Developer
Nayeli Valenzuela
Webflow Developer
Sebastián Yacelga
Webflow Developer
Diego González
Webflow Developer
Talents behind this presentation
Diana Morales
Podcast Host
Diego González
Podcast Invitee
Santiago González
Filmmaker
Let's work together
Contact us
We can help with...
UI / UX design & dev
Webflow & Hubspot
Shopify & BigCommerce
Prismic & FoxyCart
API integrations
Data automation
React apps
Web audits
Graphic design
Product photo & video