Scroll-based 3D card animation

In today's lesson, we're going to make this scroll animation, where as we scroll through the page, these 3D cards move and rotate in 3D space. You can follow along in our cloneable in the resources below, or feel free to use your own project.

So let's go over how this works. We have our section with a sticky position, which will keep it in place as the page scrolls through a certain height. We have a container, which has a large height, that's what we're scrolling through. And then we have a wrapper with our cards inside of it. And the animation we'll create will be triggered as the page scrolls through that container.

So first, let's open our interaction panel. I'll click on add interaction, scroll into view. And I'll change this to page scroll. Now, page scroll is the scroll of the page, and the keyframes work as percentages of the page height. The page scroll I'm going to create will be on the section with the sticky position. I'll click on that section, and this will apply the interaction to this element only when you scroll through it.

So now let me add the interaction. I'll click on my section and click add interaction, and then choose page scroll. And we'll apply it to just this element. Now I have my keyframes. I'll add an initial keyframe at 0% so that we have a clean start.

Now let me think about the animation I want to make. I'm going to move the cards in 3D. So I'll need to work with the transform move, rotate and perspective properties. My plan is to start with the cards far away and rotated, and then have them come towards us as we scroll. So let me add a 3D move and rotate and perspective to the 0% keyframe.

I'll click on 0%, and then click on the transform option and choose move. I'll add a Z move of -3000px. You might need to adjust this for your own project, but that will move the element 3000 pixels away from us in Z space. And I'll add a rotate X of -60 degrees, which will rotate the element downwards and away from us. And now I'll add a perspective. It's important to add perspective to the parent of the elements you want to create a 3D effect with. So I'll add this to the wrapper element. I'll set the perspective to 1500px. This will give us some perspective to our 3D elements. You can adjust this value to your liking as well. The lower the value, the more extreme the perspective effect will be. And the higher the value, the more subtle the perspective will be.

So now let's create our end state. I'll duplicate this keyframe and move it to 70%. This means the animation will happen as we scroll from 0% to 70% of the page. And in the end state, I want the cards to be back in their default position. So I'll zero out the move and the rotate values.

Let me now preview this to see how it looks. I'll save and close this panel, and then I'll go to preview. And as I scroll, I can see the cards moving and rotating towards me as I scroll down the page. That looks pretty good, but I can feel like there's something missing. Let me add a little bit more animation by adding a slight upward move and a fade in to the cards as they scroll in.

So I'll go back to my interactions and edit this page scroll. In the 0% keyframe, I'll add a move on the Y axis of 200px. And I'll add an opacity of 0. And now I'll go to my 70% keyframe and I'll also add a Y move and an opacity. I'll set the Y move to 0 to bring the cards back up, and the opacity to 100. And let me preview this again. Now the cards move up, fade in and come towards you as you scroll down the page. That's looking pretty cool!

One last thing I want to adjust is the easing of the animation. Easings give the animation more of a natural feeling. I'll select the keyframes from 0% to 70%, and then I'll change the easing to ease in out. And let's take one final look.

Now the animation eases in and out as you scroll, making it feel more natural and polished. And that's creating a scroll based 3D card animation with Webflow Interactions!