The Framer code guide explains everything about using code when building sites or prototypes in Framer. It shows you how to create different kinds of animations, has all the details about code overrides, and explains how to create your own code components. This Framer course also doubles as an extended manual that you’ll often refer to. Check the Introduction.

Last update: September 10, 2024

Animating a React project?
Check out the Mighty Motion Guide.

 

200+ example prototypes made with code

180 Framer Motion projects in CodeSandbox

100,000+ words of detailed explanations

Seriously concise info about Framer that covers most of what you want to learn. Tes has a great way of explaining a broad range of concepts from simple to more complex.

Sascha Michael Trinkaus
Director of Design Technology at RingCentral

Framer code guide is the hidden Framer manual I always turn to. It keeps up to date with Framer’s changes and is extremely well written.

Kevin Cannon
Product Designer at Pitch

With the Framer code guide, I have a reliable source which is incredibly well made. Structure and writing are just excellent.

Marie Schweiz
Freelance Interaction & UX Designer

This clear and example-rich guide gave me a deeper understanding of Framer and React. As a designer, I nowadays enjoy opening up the Code tab to design by code.

Markus Lindmark
UX Designer at HiQ

Tes’ guide is my go-to resource for everything to do with Framer. The detailed explanations with accompanying code examples really helps you get to grips with Framer and React. Highly recommended!

Simon Lucas
UX Prototyper at Channel 4

The Framer code guide has always been my go-to resource when making something in Framer. It’s incredible how well written the book is.

Utsav Shah
Designer at Kindle

The Framer code guide really is the Framer guide to depend on and an absolute gem of a find. It’s clear a ton of craftsmanship went into creating design exemplars, intuitive written and visual guides, and thorough technical documentation with concise, richly annotated code snippets and even interactive “sandboxes” to try things out myself.

Marwan Refaat
marwanrefaat.com

The Framer code guide is well laid out and easy to understand, especially from a developer standpoint.

Anthony Kiplimo
Developer Relations Professional

The Framer code guide is like a magic cheatsheet for when I get stuck.

Shuo Yang
cargocollective.com/frommainland

Packages

Table of contents

  1. Introduction Free
  2. Some Examples Free
  3. Code Overrides
    1. Basic Overrides
    2. Sharing Data Between Overrides
    3. Overriding Canvas Components
    4. Overriding Code Components
  4. Code Components
    1. A Simple Code Component
    2. Component Styling
    3. Component Sizing
    4. Motion-Compatible Components
    5. Importing Other Layers, Components, and Packages
      1. Importing Canvas, Code, and Framer Components
      2. Importing External Modules
      3. NPM Examples: Design System Components
      4. Importing Any Layer From the Canvas
    6. Customizing an Existing Component
    7. Property Controls
      1. Multiple items
      2. Grouping properties in an object
      3. Multiple objects
      4. Hiding Controls
      5. String
      6. Color
      7. Image & Responsive Image
      8. Number
      9. File
      10. Boolean
      11. Enum
      12. Fused Number
      13. Date
      14. Event Handler
      15. Transition
      16. Component Instance
    8. Flexbox Component
  5. Smart Code Components Free
    1. Props Versus State
    2. Passing Down Props
    3. Sharing State
    4. Letting a Prop Change the State
    5. Simple But Smart
    6. iOS Segmented Control
  6. The Main Properties Free
    1. The animate property Free
    2. The transition property Free
    3. The initial property Free
  7. Hooks
    1. The useState() Hook
  8. Gesture Animations Free
  1. Variants
  2. Keyframes
  3. Animation Types
  4. Exit Animations
  5. Cycling Through States
  6. Layout Animations
    1. Inline Styling Versus CSS Classes
    2. Scale Correction for Child Elements
    3. Customizing Layout Animations
    4. Layout Group
    5. Shared Layout Animations
      1. Swapping Elements
      2. Recreating Magic Motion
      3. Adding a New Element
  7. Motion Values
    1. Chaining and Transforming Motion Values
    2. Scroll-Linked Animations
    3. Scroll Layers for Prototyping
    4. Animating Motion Values
    5. Resetting a Motion Value
    6. Springy Motion Values
  8. Scroll-Triggered Animations
    1. Using whileInView
    2. Using useInView()
  9. Manual Controls
    1. The useAnimate() hook
    2. The useAnimationControls() Hook
  10. SVG Animations
    1. Animating SVG Path Changes
    2. Line Drawing
    3. Animating SVG Gradients
  11. Dragging
    1. Axis and Direction Locking
    2. Drag Constraints
    3. Drag Elastic
    4. Drag Momentum
    5. Inertia Animations
    6. Modify Target
    7. Min and Max
    8. Snap to Grid Example
    9. Snap to Corner Example
    10. Drag Events
    11. Drag Controls
  12. Reorder
  13. Using a Web API
  14. Animatable Properties
  15. API Overview Free
  16. A Framer Motion Project
    1. Create React App
    2. CodeSandbox
    3. Routing
Photo of Tes Mat

Tes Mat

I’m a web and iOS developer who was looking for the best prototyping tool. I tried eight of them, liked Framer (Classic) the most, and wrote an extended manual about it. Then, when the current version of Framer launched, I wrote this manual. I’ve also taught Framer workshops and courses at Projector in Kyiv.

Join the Mighty Guides mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.