Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Framer Motion Keyframes - Framer-motion Typing CST Test
Framer Motion Keyframes — Framer-motion Code
Animates a div using keyframes for multiple properties.
# framer_motion/demo/keyframes.jsx
import React from 'react';
import { motion } from 'framer-motion';
function Keyframes() {
return (
<motion.div
style={{ width: 100, height: 100, backgroundColor: 'orange' }}
animate={{ x: [0, 100, 0], rotate: [0, 180, 360] }}
transition={{ duration: 2, repeat: Infinity }}
/>
);
}
export default Keyframes;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.
Quick Explain
- ▸Framer Motion allows developers to animate React components declaratively.
- ▸It provides support for gestures such as drag, hover, tap, and scroll.
- ▸Animations can be controlled with spring physics or keyframes for natural motion.
- ▸It integrates seamlessly with React’s component model, allowing animations to respond to state changes.
- ▸Supports layout animations, shared element transitions, and exit/enter animations for complex UI interactions.
Core Features
- ▸motion.div, motion.span, motion.svg components
- ▸Variants to define reusable animation states
- ▸Keyframes and transition controls
- ▸AnimatePresence for mounting/unmounting animations
- ▸Drag and gesture controls
Learning Path
- ▸Learn motion component basics
- ▸Understand variants and transitions
- ▸Add gestures and interactive animations
- ▸Use AnimatePresence for dynamic mounting
- ▸Combine with state management for complex UI
Practical Examples
- ▸Button hover and tap effects
- ▸Modal enter/exit animations
- ▸Page transitions in React Router apps
- ▸Drag-and-drop sortable lists
- ▸Animated charts and dashboards
Comparisons
- ▸Framer Motion vs React Spring: Framer Motion easier for declarative UI; Spring more physics-focused
- ▸Framer Motion vs GSAP: GSAP more powerful for timeline/sequenced animations, works outside React
- ▸Framer Motion vs Anime.js: Anime.js lower-level, Framer Motion integrates directly with React
- ▸Framer Motion vs CSS transitions: JS-driven animations more flexible and interactive
- ▸Framer Motion vs Lottie: Lottie is vector animation playback; Framer Motion is dynamic UI animation
Strengths
- ▸Deep integration with React
- ▸Simple declarative syntax
- ▸Supports complex UI animations easily
- ▸Cross-browser performance optimized
- ▸Flexible API for interactive and dynamic animations
Limitations
- ▸React-only library
- ▸Can increase bundle size for large apps
- ▸Complex animations may need fine-tuning for performance
- ▸Limited low-level WebGL-like graphics control
- ▸Requires understanding of React state for dynamic animations
When NOT to Use
- ▸Non-React projects
- ▸High-performance game engine rendering
- ▸Heavy canvas or WebGL animations
- ▸Animations outside DOM elements (e.g., SVG libraries not supported)
- ▸Projects needing timeline-based sequences with absolute control
Cheat Sheet
- ▸<motion.div initial={{opacity:0}} animate={{opacity:1}} />
- ▸const variants = { hidden:{opacity:0}, visible:{opacity:1} }
- ▸<motion.div variants={variants} initial='hidden' animate='visible' />
- ▸<AnimatePresence>{condition && <motion.div exit={{opacity:0}} />}</AnimatePresence>
- ▸const x = useMotionValue(0); <motion.div style={{ x }} drag='x' />
FAQ
- ▸Can I use Framer Motion outside React? -> No, React only
- ▸Does it support gestures? -> Yes, drag, hover, tap, scroll
- ▸Is it production-ready? -> Yes, optimized for performance
- ▸Can I animate SVG? -> Yes, motion.svg components
- ▸Does it work with SSR? -> Yes, with Next.js support
30-Day Skill Plan
- ▸Week 1: Basic motion.div and simple transitions
- ▸Week 2: Variants and reusable animations
- ▸Week 3: Gesture-based animations
- ▸Week 4: AnimatePresence and page transitions
- ▸Week 5: Advanced layout and shared element transitions
Final Summary
- ▸Framer Motion is a React animation library for declarative, interactive UI animations.
- ▸Supports gestures, layout animations, and component transitions.
- ▸Integrates tightly with React state and lifecycle.
- ▸Flexible for both simple and complex interactive animations.
- ▸Widely used for modern web app interfaces and micro-interactions.
Project Structure
- ▸App.js - main React app
- ▸components/ - React components with motion wrappers
- ▸animations/ - reusable variants and transition configs
- ▸hooks/ - optional motionValue or gesture hooks
- ▸pages/ - pages with AnimatePresence transitions
Monetization
- ▸Premium SaaS dashboards with smooth UI
- ▸Landing pages for client projects
- ▸Interactive e-commerce product displays
- ▸Subscription-based UI components with animations
- ▸Animation libraries for internal design systems
Productivity Tips
- ▸Define reusable variants
- ▸Leverage AnimatePresence for conditional UI
- ▸Batch multiple animations
- ▸Use motionValues for shared state
- ▸Profile and optimize animations continuously
Basic Concepts
- ▸motion - enhanced React component for animation
- ▸Variants - reusable animation states
- ▸Transition - defines timing, easing, or physics
- ▸AnimatePresence - handles mount/unmount animations
- ▸motionValue - reactive value for animation control