CADENCE
Find Your Stride
Find Your Stride
Framer Motion animations, transitions, and loading skeletons
Fade, slide, and scale animations on mount
Simple fade in animation
Fade in from bottom
Fade in from top
Slide in from left
Slide in from right
Scale up animation
Sequential animation of multiple items
Hover and tap animations
Hover & Click Me
Scale Animation
Hover & Click Me
Lift Animation
Hover & Click Me
Rotate Animation
Spring-based slide animation
This panel slides in from the bottom with spring physics
Scroll down to see animations triggered by scroll position
Animates when scrolled into view
This card fades in and moves up when you scroll to it.
Slides in from the left side
Slides in from the right side
This card scales in when scrolled into view
Children animate sequentially
Simple CSS-based reveal animation on scroll
Shimmer loading placeholders for content
This is the actual content
Content has finished loading
John Doe
john@example.com
Jane Smith
jane@example.com
Line 1 of text
Line 2 of text
Line 3 of text
$12,345
+12.5% from last month
How to use animation utilities
Import Animations:
import {
FadeIn, FadeInUp, ScaleIn,
StaggerContainer, StaggerItem
} from '@/lib/animations/components'
import {
ScrollFadeInUp,
ScrollReveal
} from '@/lib/animations/scroll'
import { CardSkeleton } from '@/components/ui/skeleton'Use Components:
<FadeInUp delay={0.2}>
<Card>Your content</Card>
</FadeInUp>
<ScrollFadeInUp>
<div>Animates on scroll</div>
</ScrollFadeInUp>
{loading && <CardSkeleton />}Direct Framer Motion:
import { motion } from 'framer-motion'
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Hover me!
</motion.div>