Animation » Example Animations
Example Animations
Already a while ago, Benjamin den Boer released a project with 30 example animations. And later, he shared 20 Framer Motion examples.
I gathered those animations, picked the most interesting ones, and added a few of my own. With the launch of Framer for Developers, I updated them all, so these are all:
- Code components that use motion elements instead of Frames and are compatible with Auto Sizing.
- The same animations as Code overrides in the Higher-order component format, which use
createStore()instead of Framer’s Data object and extract thestyleproperty when needed.
Get them all here:
- Scroll and Page combined
- SVG path length
- Keyframes: Position and color
- Keyframes: Morphing an SVG path
- Colors: Keyframe animation
- Colors: Interpolation
- Colors: Switching between states
- Tracking the cursor
- Variants: Animation propagation
- Variants: Staggered animation
- Cycling parent and child variants
- SVG gradient animation
- Animate Presence
- Animate Presence: Stack 3D
- Layout animation
- Swapping elements
- Swipe to delete