018
Card movement
In this effect, we will make a series of cards appear from bottom to top. The cards will linger in the center of the screen before moving out with a slight bounce. The staggered appearance of each card creates a wave effect that I really love! Let’s roll up our sleeves and get started!
HTML Structure
Here, the structure is relatively simple: we will pin the container division to the height of the pin-height division while the cards move.
<div class="pin-height">
<div class="container">
<div class="card">
<img class="media" src="/assets/medias/1.svg" alt="">
</div>
<div class="card">
<img class="media" src="./assets/medias/2.svg" alt="">
</div>
...
</div>
</div>