Framer Motion Examples
Home
About
Show all
Types of examples
Framer Motion
Free examples
Examples in a CodeSandbox
Code components in Framer
Code overrides in Framer
The Framer Motion docs
Examples by Matt Perry
From Mighty Motion Guide
From the Framer Book
From another source
Gesture Animations
Variants
Orchestration
Keyframes
Animate Presence
With a Router
Layout Animations
Layout Group
Shared Layout Animations
Scroll-triggered Animations
whileInView
useInView()
inView()
Scroll-linked Animations
Page Scroll
Element Scroll
Element Position
Dragging
Drag Constraints
Drag Elastic
Drag Momentum
dragTransition
modifyTarget()
Drag Events
Drag Controls
SVG Animations
Line Drawing
Gradients
Path Morphing
Reorder
Manual Controls
useAnimate()
stagger()
useAnimationControls()
Motion Values
useScroll()
useTransform()
useSpring()
useMotionTemplate()
useTime()
useVelocity()
animate()
useAnimationFrame()
Cycling Through States
useReducedMotion()
Framer Motion 3D
Framer
Code Overrides
Sharing Data
Use with Canvas Components
Use with Code Components
Code Components
Component Styling
Component Sizing
Compatibility
Importing
Property Controls
Examples
>
Styled Components - A simple box
CodeSandbox
Code component
Code overrides
Code Components » Component Styling
A simple example of using the Styled Components CSS-in-JS library to style your code component.