Stacked Card Scrolling Effect

Learn how to create sticky scroll effects in Wix Studio to give websites an added layer of depth and interest.

Follow along with this demo to learn how to recreate this stacked card scrolling effect, step-by-step. Add as many images as you want and customize the scroll experience with a layered effect to add interactivity to your design.

Add a new section

Add a Container.
1. Set the height to Auto
2. Divide it into columns
  1. Set the left side to 0.4 fr
  2. Set the right side to 0.6 fr
  3. All images will be added to the right column

Add your first image to the section. Adjust the positioning as follows:
1. Height: 100 vh
2. Width: 100%
3. Position type: Sticky
4. Stick to: Top
5. Offset: 0%

Add your second image to the container. Set the positioning as follows:
1. Position type: Sticky
2. Stick to: Top
3. Offset: 36 px
4. Top margin: 830 px

Choose Scroll animation and select Shrink. Adjust the animation:
1. Animation type: Out
2. Direction: From top
3. Scale: 70%
4. Speed: 0 sec
5. Animation Area: 20%-100%

Add your third image to the container. Set the positioning as follows:
1. Position type: Sticky
2. Stick to: Top
3. Offset: 72 px
4. Top margin: 1660 px

Choose Scroll animation and select Shrink. Adjust the animation:
1. Animation type: Out
2. Direction: From top
3. Scale: 80%
4. Speed: 0 sec
5. Animation Area: 20%-100%

Add your fourth image to the container. Set the positioning as follows:
1. Position type: Sticky
2. Stick to: Top
3. Offset: 108 px
4. Top margin: 2490px

Choose Scroll animation and select Shrink. Adjust the animation:
1. Animation type: out
2. Direction: From top
3. Scale: 90%
4. Speed: 0 sec
5. Animation Area: 20%-100%

Add your final image to the container. Set the positioning as follows:
1. Height: 100 vh
2. Width: 100%
3. Position type: Sticky
4. Stick to: Top
5. Offset: 0%
6. Top margin: 3320 px
7. Blend mode: Lighten

Transcript

Want to see how this scroll magic moment was built on Wix studio? Let's break it down.

Let's start with our five images and each one of them will be positioned a little bit different on the scroll.

So first image, we're gonna set the height to a hundred vh. Make it sticky to top and set the offset to 0%.

This one stays behind everything but always in view. Now let's bring in the three cards. They will also be sticky to top with different offsets and margins.

The first card we're going to add a sticky to top, offset of 36 pixels and a margin top of 830, the second card, let's double all the values and the third card, triple everything.

Then comes our final image. In this one, we're gonna overlay and blend on top of everything, so drop it on the site. Let's turn on advanced settings.

Set the width to a hundred percent and the height to a hundred vh. Make it sticky to top, and a margin top of 3,320 pixels and change the blend mode to lighten.

Now let's add our scroll animations. For all three cards, we're gonna choose a scroll, animation, shrink, and animation type out. Let's set the direction from top speed to zero seconds in the animation area from 20 to a hundred percent.

What changes between them is the scale. So for the first one, we're gonna start at 70%, and then we're gonna increase 10% each time.

And just like that, you've got a scroll animation that feels like storytelling through layers and all of it built right here on the editor with no virtual tools needed.

Want to see more of this? Check out another tutorial.