Card Stacking Scroll Animation
Jan 25, 2023
Class breakdown
Section (Class)
This is the full-lenght section that the user scrolls inside. In my case, I set its height to 600vh, which is a fair amount of height to scroll through.
Sticky Wrapper (Class)
This is the full-page wrapper which is in view while scrolling. It has a sticky position, sticking to the top of the page with a 0px top position. I also gave it a 100vh height in order to fill the whole page.
In order to center the heading (that's in view as default) I used flex to justify-content center and align-items center.
Card (Class)
This is the wrapper for the card and its content. In order to spread its children out horizontally left and right, we'll use flex with a justify-content: space between.
I gave my card a 70 REM width and a 35 REM height with a background color of #202020. It also has a small box-shadow.
Card Content (Class)
This class contains the text-content of the card. It has a 60% width, a 2 REM padding, and its children are spread out vertically with flex using a vertical justify-content: space between.
Card Content Wrapper (Class)
This is yet another wrapper for the content of the card. It has a vertical 2 REM flex gap to give some space between its children.
Card Content Grid (Class)
In order to space out the two small bottom paragraphs, I'm using a simple grid with a gap of 2 REM.
Line Horizontal (Class)
This is just a simple horizontal line. It has a 1 PX height and a background color.
Card Image (Class)
The card image takes up the reminding 40% of the card's width and has a background image set to size: cover, position: 50% left, 50% top and no tile.
Combo classes for each card
Each card has its own combo class in order to make it possible to animate them separately. The "Card" class itself receives a "Card + Card 1", "Card + Card 2" and so on. Each individual card then gets their own top margin, in order to create the "stacked" look.
- "Card 1": -4 REM
- "Card 2": 0 REM
- "Card 3": 4 REM
- "Card 4": 8 REM.
As a good practice, we should also probably give each card a default position of being off screen. I gave mine a y-axis position of 200% (using transform), pushing them all down below the fold.
Each card's "Card Image" class also receives a "Card Image + Card Image 1", "Card Image + Card Image 2" combo class. This makes it possible to change the background image for each Card Image-element.
The interaction
The interaction is a "while scrolling in view"-interaction set on the Section element, and has an 80% smoothing applied.
Each card has a default state of -200% on the y-axis at keyframe 0%. Then they get animated one by one to a position of 0% on the y-axis on keyframes 25%, 50%, 75% and 100%.
You might also have noticed that I set three keyframes for each card, one default at 0%, one when the card should start animating (for example for Card 2, at 25%) and one when it should stop. If I had applied the default off-screen position of 200% on the y-axis, I probably wouldn't have needed the first default keyframe (at 0%) for card 2-4.
Interaction boundaries
The animation starts when the element (Section) is visible, and in order to get it to work when there's no content below the section it ends when the element "starts exiting" with an offset of 75%.