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.

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 data-state
<span
  data-state={state}
  className="[&[data-state='visible']]:animate-in-fade-up [&[data-state='visible']]:opacity-100"
>
  ...
</span>

See the Using the Animations Library page for a complete reference of every CSS utility class, duration override, and Framer Motion variant.

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>;