Some Examples

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.

Get them all here:

📘 The Framer Code Guide – 💫 Example animations

 

  1. Tween
  2. Spring
  3. Duration-based spring
  4. Repeat
  5. Reverse
  6. While hover
  7. While tap
  8. While drag
  9. Cycling through states
  10. Animation sequence
  11. Drag: Constraints
  12. Drag: Direction locking
  13. Drag: Transform
  14. Drag: 3D transform
  15. Scroll: Progress
  16. Scroll: Refresh
  17. Page: Indicators
  18. Page: Effects
  1. Scroll and Page combined
  2. SVG path length
  3. Keyframes: Position and color
  4. Keyframes: Morphing an SVG path
  5. Colors: Keyframe animation
  6. Colors: Interpolation
  7. Colors: Switching between states
  8. Tracking the cursor
  9. Variants: Animation propagation
  10. Variants: Staggered animation
  11. Cycling parent and child variants
  12. SVG gradient animation
  13. Animate Presence
  14. Animate Presence: Stack 3D
  15. Layout animation
  16. Swapping elements
  17. Swipe to delete

Leave a Reply