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-fade-up

Fade up

Fade down

animate-fade-down

Fade down

Fade left

animate-fade-left

Fade left

Fade right

animate-fade-right

Fade right

Zoom in

animate-zoom-in

Zoom in

Fade in

animate-fade-in

Fade in

Spin

animate-spin

Spin

Framer Animations

Hover a card to trigger only that variant.

    fadeUp

    fadeUp

    fadeDown

    fadeDown

    slideInFromLeft

    slideInFromLeft

    slideInFromRight

    slideInFromRight

    zoomIn

    zoomIn

    fadeIn

    fadeIn

    spin

    spin