Animated Transition 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

Fade up

Fade down

Fade down

Fade left

Fade left

Fade right

Fade right

Zoom in

Zoom in

Fade in

Fade in

Spin

Spin
// Trigger the animation by toggling the class via state
<span className={state === 'visible' ? animClassMap.animation : undefined}>
  ...
</span>

Framer Motion Variants

Hover a card to trigger only that variant.

  • fadeUp

    fadeUp

  • fadeDown

    fadeDown

  • slideInFromLeft

    slideInFromLeft

  • slideInFromRight

    slideInFromRight

  • zoomIn

    zoomIn

  • fadeIn

    fadeIn

  • spin

    spin
'use client';
 
import { motion } from 'framer-motion';
import { useState } from 'react';
import { fadeUp } from '@/animations';
 
// Animate between "hidden" and "visible" variants via state
<motion.div
  variants={fadeUp}
  initial="hidden"
  animate={isHovered ? 'visible' : 'hidden'}
>
  ...
</motion.div>;