Sticky layered section

1. Select a blank section and apply a 3X8 grid. From the Inspector panel, set the height of the first grid row to 45vh, and the height of the remaining rows to 55vh. 

2. Open the Add panel and drag a container into the first grid row. Stretch it to fill the row and add 5% margin from the left and right.

3. Place a stacked title and button inside the container and dock it to the center. 

4. In the second grid row, add a container to each of the 3 columns. Stretch each one to fill the cell it's in. Set the background color of the first container to the same one as the section, and give the second and third containers different background colors. 

5. Add a text stack with subtitle and paragraph to the first container and align it to the center. Add images with transparent backgrounds to the other 2 containers. 

6. Duplicate one of your colorful containers and place it in the first cell of the next grid row. Change the color and content according to your design. Continue adding containers with the images and text you want, in the order you want them to appear, in the remaining rows. To achieve the scroll effect in this design, make sure that in grid rows 3 to 8, at least one cell has a container, and at least one cell is empty. 

7. Select the container you added to the first row. Change the position type to Sticky, and leave the top offset at 0px. 

8. One-by-one, select every other container you added to the grid and set the position type to sticky. For each one, add a Top offset that is the same height of the first grid row, 45vh, this way the containers don’t cover the content in the first row. 

9. Preview to see how the scroll effect works. As you scroll, the cards should slide up and layer over one another. 

Tip: If one of the containers is covering the one above it while you scroll, open the Layers panel and reorder them. The containers that are at the bottom of the grid should be at the top of the panel so they are arranged in front of the ones that appear before them.