Framer Motion Stagger Children - Framer-motion Typing CST Test
Loading…
Framer Motion Stagger Children — Framer-motion Code
Animates multiple divs with staggered timing.
# framer_motion/demo/stagger_children.jsx
import React from 'react';
import { motion } from 'framer-motion';
function StaggerChildren() {
return (
<motion.div
initial="hidden"
animate="visible"
variants={{
hidden: {},
visible: { transition: { staggerChildren: 0.2 } }
}}>
<motion.div style={{ width: 50, height: 50, backgroundColor: 'red' }} variants={{ hidden:{opacity:0}, visible:{opacity:1} }}/>
<motion.div style={{ width: 50, height: 50, backgroundColor: 'green' }} variants={{ hidden:{opacity:0}, visible:{opacity:1} }}/>
<motion.div style={{ width: 50, height: 50, backgroundColor: 'blue' }} variants={{ hidden:{opacity:0}, visible:{opacity:1} }}/>
</motion.div>
);
}
export default StaggerChildren;Framer-motion Language Guide
Framer Motion is a production-ready animation library for React, designed to create smooth, declarative animations, gestures, and transitions in web applications.
Primary Use Cases
- ▸Page and component transitions
- ▸Interactive UI animations and micro-interactions
- ▸Drag-and-drop gestures
- ▸Animated modals, menus, and notifications
- ▸Shared element transitions and layout animations
Notable Features
- ▸Declarative React animation API
- ▸Gestures: drag, hover, tap, pan, scroll
- ▸Spring-based physics animations
- ▸Layout animations and shared layout transitions
- ▸Exit/enter animations with AnimatePresence
Origin & Creator
Framer Motion was developed by Framer B.V., the same team behind the Framer prototyping tool (2018-present).
Industrial Note
Framer Motion is used extensively in interactive web apps, SaaS dashboards, landing pages, micro-interactions, and complex React UI/UX animations.