Floating iPad Scroll Animation for Your Website
Recreate Apple iPad Air website animations in Webflow — step by step guide
In this tutorial, I'll explain how you can recreate the iPad Air animation design in Webflow without using 3D renderings.
The basics
Before we get started, we need to sort out a few things. For this project, I used a series of iPad mockups that I had already created earlier. But you can use any image or even an animated background video. It is important that we only create one interaction for this animation, which is then applied to all elements with the same CSS class.
Create an area for scrolling animation
First, we'll create a section for our scrolling animation. We're setting a minimum height of 200 viewport heights (VH) to ensure there's enough space for the animation. Then we make the text area a 'sticky' element that floats with you as you scroll the page, much like the flying iPads on the Apple page.
Add iPads and customize the layout
Next, we'll add our iPad mockups and adjust the layout accordingly. We want the iPads to float across the entire width of the page and not be limited by a container. That's why we put them in a separate 'wrapper' div that has 100% width.
To give the impression that the iPads are slightly offset and overlapping, we use a negative margin top of -30%. To prevent the first iPad from moving up, we give it a CSS Combo Class and set Margin-Top to 0.
Create the scroll animation
Now we're on to the most exciting part: creating the scroll animation. We use the 'While Scrolling in View 'interaction in Webflow and apply it to every element with the 'iPad Item class.' With this interaction, you can animate the scaling and movement of the iPads.
For example, we can resize the iPads from large to small as they scroll in the viewport. Or we can move them horizontally and vertically to create the illusion that they're floating through space.
Add a 3D effect
To imitate the 3D effect of the Apple page, we use the CSS 'Rotate' transformation. It is important here that we give the wrapper div of iPad items a 3D perspective of 1000 pixels. This ensures that all child elements receive a 3D perspective, which makes the animation look more realistic.
conclusion
By imitating the iPad Air's floating scroll animations on the Apple page, you can create an impressive design in Webflow, which is very suitable for portfolio pages or customer projects. And the best thing about it? You can duplicate this animation very quickly and apply it across the entire site.
synopsis
- Start by creating a section with a minimum height of 200 VH (viewport height).
- The text container in the section is made a “sticky” element so that it remains visible when scrolling.
- Make sure that the iPad scrolling animation is across the entire width of the screen.
- Using the “While Scrolling in View” feature, you can create animations that change depending on how far the user has scrolled on the page.
- Using scale, movement, and rotation in your animations can help create the effect of moving iPads.
- By changing the width of your iPad wrapper, you can quickly resize your animation, making it easy to make it responsive.
