Animated Cards
A collection of cards that slides over time.
Projects /
Projects /
A collection of cards that slides over time.
The Animated Cards component is used to display a collection of cards on a single line. The list is translated over time to reveal new cards.
By default, the list translates from right to left. To reverse the direction of the animation, add the .anim-cards--reverse class to the .anim-cards element.
You can change the default width of the single card using the --anim-cards-width CSS variable defined in the .scss file.
To change the gap between cards, update the --anim-cards-gap CSS variable.
If you want to change the speed of the animation, you can change the animationSpeed property of the AnimCards object defined in the .js file (> 1 will speed-up the animation, < 1 will slow down the animation).
If you want to pause the animation on hover, add a data-anim-cards-pause-hover="on" attribute to the .js-anim-cards element:
<div class="anim-cards js-anim-cards" data-anim-cards-pause-hover="on">
<!-- collection of cards -->
</div>The Card-v2 component has been used as card element to create the cards list.
Note: the effect is disabled if the reduced motion setting is on.
The Animated Cards component comes with the option of adding a pause/play button. Make sure to add, to the control button, an aria-controls attribute equal to the id of the cards container:
<button class="reset anim-cards-control js-anim-cards-control js-tab-focus" aria-controls="animated-cards" aria-label="pause animation" aria-pressed="false"><i></i></button>
<div id="animated-cards">
<div class="anim-cards js-anim-cards">
<!-- collection of cards -->
</div>
<div class="anim-cards anim-cards--reverse js-anim-cards">
<!-- collection of cards -->
</div>
<!-- additional collections of cards -->
</div>🏙 Demo images:
