UI Kit Animation Examples

These examples are built as a practical reference for developers and designers. They support hover replay so animations are easy to test repeatedly.

< Back to Getting Started

CSS Animations

Hover a card to trigger only that animation.

Fade up

animate-in-fade-up

Fade up

Fade down

animate-in-fade-down

Fade down

Fade left

animate-in-fade-left

Fade left

Fade right

animate-in-fade-right

Fade right

Zoom in

animate-in-zoom

Zoom in

Fade in

animate-in-fade

Fade in

Spin in

animate-in-spin

Spin in

Framer Animations

Hover a card to trigger only that variant.

    fadeUp

    fadeUp

    fadeDown

    fadeDown

    slideInFromLeft

    slideInFromLeft

    slideInFromRight

    slideInFromRight

    zoomIn

    zoomIn

    fadeIn

    fadeIn

    spin

    spin