Framer book logo
  • Table of Contents
    • Framer for Developers
      Framer for Developers
    • Code Overrides
      Code OverridesBasic OverridesSharing Data Between OverridesOverriding Smart ComponentsOverriding Code ComponentsOverriding Design Components
    • Code Components
      Code ComponentsA Simple Code ComponentComponent StylingComponent SizingMotion-Compatible ComponentsImporting Other Layers, Components, and PackagesCustomizing an Existing ComponentProperty ControlsFlexbox Component
    • Animation
      AnimationThe Animate PropertyThe Transition Property‘While’ Animations and InitialVariantsHooksThe useState() HookAnimate PresenceThe useCycle() HookThe useAnimation() HookKeyframesAnimatable PropertiesAnimation TypesAnimating to a Scroll PositionAPI OverviewExample Animations
    • Framer Motion
      Framer MotionCreate React AppCodeSandboxAutomatic Layout AnimationsLayout GroupLayout IDScroll-based AnimationsSVG AnimationsDrag ControlsRouting
    • Smart Code Components
      Smart Code ComponentsProps Versus StatePassing Down PropsSharing StateLetting a Prop Change the StateSimple But SmartiOS Segmented Control
    • Dragging
      DraggingAxis and Direction LockingDrag ConstraintsDrag ElasticDrag MomentumInertia AnimationsModify TargetMin and MaxSnap to Grid ExampleSnap to Corner ExampleDrag Events
    • Archive
      ArchiveDesign ComponentsOverrides (pre X22)Code Components (pre X22)Animations (pre X22)
  • Updates
  • FAQ
  • Get the book
Login / Register

  • Framer for Developers
    Framer for Developers
  • Code Overrides
    Code Overrides Basic Overrides Sharing Data Between Overrides Overriding Smart Components Overriding Code Components Overriding Design Components
  • Code Components
    Code Components A Simple Code Component Component Styling Component Sizing Motion-Compatible Components Importing Other Layers, Components, and Packages Customizing an Existing Component Property Controls
    Flexbox Component
  • Animation
    Animation The Animate Property The Transition Property ‘While’ Animations and Initial Variants Hooks The useState() Hook Animate Presence The useCycle() Hook The useAnimation() Hook Keyframes Animatable Properties Animation Types Animating to a Scroll Position API Overview 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 19. Scroll and Page combined 20. SVG path length 21. Keyframes: Position and color 22. Keyframes: Morphing an SVG path 23. Colors: Keyframe animation 24. Colors: Interpolation 25. Colors: Switching between states 26. Tracking the cursor 27. Variants: Animation propagation 28. Variants: Staggered animation 29. Cycling parent and child variants 30. SVG gradient animation 31. Animate Presence 32. Animate Presence: Stack 3D 33. Layout animation 34. Swapping elements 35. Swipe to delete
  • Framer Motion
    Framer Motion Create React App CodeSandbox Automatic Layout Animations
    Layout Group Layout ID
    Scroll-based Animations SVG Animations
    Drag Controls Routing
  • Smart Code Components
    Smart Code Components Props Versus State Passing Down Props Sharing State Letting a Prop Change the State Simple But Smart iOS Segmented Control
  • Dragging
    Dragging Axis and Direction Locking Drag Constraints Drag Elastic Drag Momentum Inertia Animations Modify Target Min and Max Snap to Grid Example Snap to Corner Example Drag Events
  • Archive
    Archive Design Components Overrides (pre X22) Code Components (pre X22)
    Animations (pre X22)
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 the style property when needed.

Get them all here:

📘 The Framer book – 💫 Example animations
  • open in Framer Web

 

  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

API Overview 1. Tween

Leave a Reply Cancel reply

You must be logged in to post a comment.

Home FAQ Updates
Copyright © 2016-2022 Tes Mat.