Apple Airpods Pro Landing Page

Design help Animations & Interactions
1

Hello beautiful people!

I just saw the new landing page of the Airpods Pro and I’m really mesmerized.

How can you create something like that?

I’m thinking that making an animation and rendering the frames separately and then doing some magic on webflow could make it.

But I’m wondering how would you plan the sequences to have the right speed and what’s the webflow magic jujus needed to support that?

And also how would you add links and buttons over the landing page?

So many questions… I hope someone has some answers!

Thank you in advance!

Here is my public share link: LINK
(how to access public share link)

2

Amazing effect :slight_smile:

interaction-2

On webflow one way is to create fixed div background and show/hide images on scroll (But again for 50-60 images = very hard to manage)

workshop

https://webflow.com/live-stream/creating-a-background-scroll-interaction-in-webflow

  • The image sequence (background) changes on a scroll.
  • And overlay of buttons/text also changes on a scroll.

Sum: two seperate layers

Manual (Tidy) synchronization between the top and back layers give this effect.

scrollmagic (apple use their own code)
https://scrollmagic.io/examples/expert/image_sequence.html

1 Like
3
3 Likes