www.framer.com Open in urlscan Pro
2600:9000:25a2:7200:1c:bf01:380:93a1  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Motion
Back to framer.com
Design and publish your first free site today.


GETTING STARTED

 * Introduction
 * Examples

ANIMATION

 * Overview
 * Layout
 * Gestures
 * Scroll
 * Transition

COMPONENTS

 * motion
 * AnimatePresence
 * LayoutGroup
 * LazyMotion
 * MotionConfig
 * Reorder

MOTION VALUES

 * Overview
 * useMotionValueEvent
 * useMotionTemplate
 * useScroll
 * useSpring
 * useTime
 * useTransform
 * useVelocity
 * useWillChange

HOOKS

 * useAnimate
 * useAnimationFrame
 * useDragControls
 * useInView
 * useReducedMotion

UNIVERSAL

 * animate
 * scroll
 * inView
 * transform
 * stagger
 * frame
 * Easing functions

3D

 * Introduction
 * LayoutCamera
 * LayoutOrthographicCamera
 * MotionCanvas

GUIDES

 * Accessibility
 * Reduce bundle size
 * Upgrade guides

COMMUNITY

 * GitHub
 * Discord


INTRODUCTION

Get started with Framer Motion and learn by exploring interactive examples.


#OVERVIEW

Framer Motion is a simple yet powerful motion library for React.

It powers the amazing animations and interactions in Framer, the web builder for
creative pros. Zero code, maximum speed.

In this quick overview, we'll take a look at some of the APIs that Motion
offers.


#THE <MOTION /> COMPONENT

The core of Motion is the motion component. Think of it as a plain HTML or SVG
element, supercharged with animation capabilities.

<motion.div />

Copy<motion.div />



#ANIMATIONS

Animating a motion component is as straightforward as setting values on the
animate prop.

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

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

When these values change, Framer Motion will automatically generate an animation
to the latest values. This animation will feel great by default, but it can be
configured with the flexible transition prop.




#GESTURES

<motion /> extends React's event system with powerful gesture recognisers. It
supports hover, tap, pan and drag.

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

Copy<motion.div whileHover={{ scale: 1.2 }} whileTap={{ scale: 1.1 }} 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>
)

Copyconst 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> )


#SCROLL-TRIGGERED ANIMATIONS

Elements can animate as they enter and leave the viewport with the handy
whileInView prop.

<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
/>

Copy<motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} />


#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 }} />

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


#MOTIONVALUES

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.

const x = useMotionValue(0)
const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0])


return <motion.div drag="x" style={{ x, opacity }} />

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


#LAYOUT ANIMATIONS

Framer Motion is capable of animating changes in layout using performant
transforms.

<motion.div layout />

Copy<motion.div layout />


#MANUAL ANIMATIONS

The useAnimate hook can be used to manually trigger animations in effects and
event handlers. It can also be used to orchestrate more complex animations.

<div onClick={() => animate(".boxes", { opacity: 0 })} />

Copy<div onClick={() => animate(".boxes", { opacity: 0 })} />


#QUICK START

Framer Motion requires React 18 or greater.


#INSTALLATION

Install framer-motion from npm.

npm install framer-motion

Copynpm install framer-motion


#IMPORTING

Once installed, you can import Framer Motion via framer-motion.

import { motion } from "framer-motion"

Copyimport { motion } from "framer-motion"
NextExamples

ON THIS PAGE

 * Overview
 * The <motion /> component
 * Animations
 * Gestures
 * Variants
 * Scroll-triggered animations
 * Server-side rendering
 * MotionValues
 * Layout animations
 * Manual animations
 * Quick Start
 * Installation
 * Importing

Copyright © 2022 Framer B.V.

 * Cookies
 * Security
 * Terms of Service
 * Privacy Statement

We use cookies to analyze site performance and deliver personalized content. By
clicking “Agree”, you consent to our Cookie Policy. You may change your settings
at any time.

AgreeMore options