Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
DocumentationGetting started
Introduction
  • Overview
  • Motion
  • Handshake
  • Guides
  • API Documentation
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
DocumentationGetting started
Introduction
  • Overview
  • Motion
  • Handshake
  • Guides
  • API Documentation
Getting started
  • Introduction
  • Examples
API
  • Animation
  • Transition
  • Gestures
  • MotionValue
  • Utilities
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Motion resources
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Code in Framer
  • Utilities
  • RenderTarget
  • Property Controls
Community
  • GitHub
  • Discord

Introduction

Get started with Motion and learn by exploring interactive examples.

#Overview

Motion is a production-ready motion library for React from Framer. It brings declarative animations, effortless layout transitions and gestures while maintaining HTML and SVG semantics.

#Animations

Making animations is as easy as setting values on the animate prop. Motion will automatically generate an animation for you, and this can be overridden with the powerful transition prop.

<motion.div animate={{ x: 100 }} />

#Gestures

Motion extends React's event system with powerful gesture recognisers. It supports hover, tap, pan and drag.

<motion.div
drag="x"
dragConstraints={{ left: -100, right: 100 }}
/>

#Variants

Variants can be used to animate entire sub-trees of components with a single animate prop. Options like when and staggerChildren can be used to declaratively orchestrate these animations.

const list = { hidden: { opacity: 0 } }
const item = { hidden: { x: -10, opacity: 0 } }
return (
<motion.ul animate="hidden" variants={list}>
<motion.li variants={item} />
<motion.li variants={item} />
<motion.li variants={item} />
</motion.ul>
)

#Server-side rendering

The animated state of a component will be rendered server-side to prevent flashes of re-styled content after your JavaScript loads.

<motion.div initial={false} animate={{ x: 100 }} />

#MotionValues

Create declarative, reactive chains of MotionValues that can update as a result of animations and/or gestures.

const x = useMotionValue(0)
const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0])
return <motion.div drag="x" style={{ x, opacity }} />

#Scroll-based animations

Create declarative, reactive chains of MotionValues that can update as a result of animations and/or gestures.

const { scrollYProgress } = useViewportScroll()
return (
<motion.path style={{ pathLength: scrollYProgress }} />
)

#Quick Start

Motion requires React 16.8 or greater.

#Installation

Install framer-motion from npm.

npm install framer-motion

#Importing

Once installed, you can import Motion into your components via framer-motion.

import { motion } from "framer-motion"

#Topics

#Motion components

motion components are the core of the Motion API. There's a motion component for every HTML and SVG element. They work exactly the same, with additional props that allow you to declaratively add animations and gestures.

Learn more

<motion.div animate={{ scale: 0.5 }} />

#Animation

motion components are animated via the flexible animate prop. This can accept an object, variant label(s), or a reference to imperative animation controls.

Learn more

const variants = {
hidden: { opacity: 0 },
visible: { opacity: 1 },
}
return (
<motion.div
initial="hidden"
animate="visible"
variants={variants}
/>
)

#Gestures

motion components can detect hover, tap, pan and drag gestures.

They also offer some helper props to temporarily animate while a gesture is active.

Learn more

<motion.div
drag="x"
dragConstraints={{ left: -100, right: 100 }}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
/>

#MotionValue

MotionValues are used to track the state and velocity of animating values, outside of React's render lifecycle.

They're created automatically and used internally by motion components. But they can also be created manually and chained together to create performant, declarative effects.

Learn more

const x = useMotionValue(0)
const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0])
return <motion.div drag="x" style={{ x, opacity }} />
NextExamples
On this page
  • Overview
  • Animations
  • Gestures
  • Variants
  • Server-side rendering
  • MotionValues
  • Scroll-based animations
  • Quick Start
  • Installation
  • Importing
  • Topics
  • Motion components
  • Animation
  • Gestures
  • MotionValue

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement