# Create Vertical Scrolling Cards

**URL:** https://forum.readymag.com/t/create-vertical-scrolling-cards/4181
**Category:** Animations
**Created:** [January 14, 2025, 11:32am UTC](https://forum.readymag.com/t/create-vertical-scrolling-cards/4181 "2025-01-14T11:32:05Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Ada\_L](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Ada\_L](https://forum.readymag.com/u/Ada_L)
#### Post date: [January 14, 2025, 11:32am UTC](https://forum.readymag.com/t/create-vertical-scrolling-cards/4181/1 "2025-01-14T11:32:05Z")

</div>

I am trying to achieve a scrolling card animation. I plan to have a stack of cards on top of each other and I want them to slide down as the user scrolls to uncover one project at a time. And as I scroll up, it slides back up to it’s default position.

How do I do this?

I have attached a photo of the layout. The gray background is mainly for visual purposes when working on animation.

Thanks.

 ![Screenshot 2025-01-14 at 3.27.27 AM](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/8/83ce21c9e0591c7f5e622e050c708f78606a1f09.jpeg)

---

<div class="post-metadata">

### Author: ![Elyse](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/elyse/32/3947_2.png) [@Elyse](https://forum.readymag.com/u/Elyse)
#### Post date: [December 29, 2025, 7:08pm UTC](https://forum.readymag.com/t/create-vertical-scrolling-cards/4181/2 "2025-12-29T19:08:07Z")

</div>

Hey I want to do the same thing for my website. Did you ever figure it out?

---

<div class="post-metadata">

### Author: ![Ada\_L](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@Ada\_L](https://forum.readymag.com/u/Ada_L)
#### Post date: [March 17, 2026, 12:20am UTC](https://forum.readymag.com/t/create-vertical-scrolling-cards/4181/3 "2026-03-17T00:20:16Z")

</div>

Sorry for the long response. I actually changed my layout. Never found a solution.