Open source, production-ready animation and gesture library for React

Related tags

React motion

Framer Motion

An open source and production-ready motion
library for React on the web.

Chat on Discord

Framer Motion is an open source, production-ready library that's designed for all creative developers.

It looks like this:

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

It does all this:

  • Spring animations
  • Simple keyframes syntax
  • Gestures (drag/tap/hover)
  • Layout and shared layout animations
  • SVG paths
  • Exit animations
  • Server-side rendering
  • Variants for orchestrating animations across components
  • CSS variables

...and a whole lot more.

Get started

Quick start

npm install framer-motion
import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />


Check out our documentation for guides and a full API reference.

Or checkout our examples for inspiration.


Want to contribute to Motion? Our contributing guide has you covered.


Motion is MIT licensed.

  • [FEATURE] React Native Support

    [FEATURE] React Native Support

    Is your feature request related to a problem? Please describe. Can't currently use with react native components

    Describe the solution you'd like support for react-native (motion.View?)

    Describe alternatives you've considered I haven't dug much into if this is even possible atm.

    opened by chrisdrackett 71
  • [BUG] 5.0 Failed to compile with create-react-app

    [BUG] 5.0 Failed to compile with create-react-app

    Failed to compile.
    Can't import the named export 'Children' from non EcmaScript module (only default export is available)
    opened by semihraifgurel 45
  • [BUG] Not working on IE

    [BUG] Not working on IE

    The website my team are developing is using Framer Motion. It seems that it won't work on Internet Explorer. I've tested it with IE 11. Searching for bug reports lead me to nothing.

    When I tried to go in to your website on IE,, animations did not appear to be working either.

    Has Framer Motion support for IE? If no, do you plan to implement it in a near future?

    opened by mackan92 45
  • [BUG] Stop scrolling from interfering with dragging

    [BUG] Stop scrolling from interfering with dragging

    Is your feature request related to a problem? Please describe. If you render a list of drag="x" components and try to scroll down on a touch device, a small amount of horizontal drag happens on each element that your finger touches.

    Describe the solution you'd like A generic solution could be to allow the variant styles to override the styles from the drag.

    let variants = {
      // this would override whatever x value the drag gesture is providing
      static: { x: 0 },
      swiping: { },
    let Swipeable = () => {
      let [isSwiping, setIsSwiping] = useState(0);
      let onDrag = (event, info) => setIsSwiping(info.offset.x > 10);
      return (
        <motion.div drag="x" animate={isSwiping ? "swiping" : "static"} onDrag={onDrag} />

    Describe alternatives you've considered I also tried overriding by passing transform styles directly to the motion.div element.

    A more specific version of this might be adding a dragThreshold prop that would specify the offsets that the gesture must pass before the onDragStart event is called.

    Another option might be having some way to cancel the animation (but not the event) from the onDrag handler.

    opened by danprince 29
  • Does not seem to fully support styled-components?

    Does not seem to fully support styled-components?

    I want to do this, passing the gatsby-image component `Img into a styled component, while animating it, like so:

    const AnimatedImage = styled(motion(Img))`
      width: 200px;
      height: auto;

    but this does not seem to work, giving me this error:

    TypeError: Object(...) is not a function
      78 |   }
      79 | `
      80 | 
    > 81 | const LaxImg = styled(motion(Img))`
      82 |   width: 200px;
      83 |   height: auto;
      84 | `

    it seems to work with regular html tags, just not react components, which is no bueno for me :-(

    Am i doing something wrong? Is something like this not supported? It really needs to be supported, so hopefully I am doing something wrong or it's on the way.

    opened by rchrdnsh 25
  • layoutTransition using height instead of transforms

    layoutTransition using height instead of transforms

    Comment moved from #268.

    For the new layoutTransition was opted for a transform + useInvertedScale() approach. There are several practical issues with this when trying to implement something like a auto growing container for items:

    • It requires an extra child component just to be able to use useInvertedScale()
    • The inversion isn't always exact, causing a wonky shifting effect (#274)
    • There is often a subtle shift when the browser changes render mechanisms when the transition finishes and goes back to transform: none. Could be 'fixed' by doing something like transform: rotate( .0001deg ), but is a nasty workaround and not easy to do as the transform is applied inline.
    • Most importantly, the contents around the container do not follow the grow/shrink transition; they instantly snap into their new location, which looks odd (see

    Describe the solution you'd like An option to animate height (+ overflow:hidden) on the parent container instead of using transforms. Ideal would be if the overflow:hidden would be applied automatically as well, and only while the animation is running.

    Here is an example of the effect I like to achieve: -> but of course, without setting fixed heights (it also animate when content changes).

    feature wontfix 
    opened by rijk 24
  • [BUG] Laggy in Firefox

    [BUG] Laggy in Firefox


    When using framer-motion, all used animations are lagging on Firefox, even the ones from the Example page. I've tried it on Chromium and saw no issue whatsoever in a laggy animation. FPS also seem fine (28-30fps).


    Even tho you require a CodeSandbox for reproduction, it's not actually needed, as this also happens with the Examples on the Framer Motion page (or Docs).

    Code example I'm using as of now:

    const variants = {
      open: { opacity: 1, y: 0 },
      closed: { opacity: 0, y: '15px' },
    <motion.div initial={false} animate={shareBarVisible ? 'open' : 'closed'} variants={variants}>
          <FacebookShareButton url="">
            <FacebookIcon size={32} round />
          <TwitterShareButton url="">
            <TwitterIcon size={32} round />
          <EmailShareButton url="">
            <EmailIcon size={32} round />

    Steps to reproduce

    Steps to reproduce the behavior:

    1. Go to
    2. Scroll down to any animation
    3. See laggyness

    Expected behavior

    The animation should not be laggy. See following Video:


    Current behavior in Firefox:

    Environment details

    OS: macOS Catalina Browser: Firefox Developer Edition (recent public build)

    opened by visualcookie 22
  • Support e.preventDefault() and e.stopPropagation() in tap/drag events

    Support e.preventDefault() and e.stopPropagation() in tap/drag events

    • In my app I have <Link> elements inside a draggable <motion.div> element. When the user clicks those, I don’t want the drag/whileTap styles to activate.
    • I tried to achieve this by blocking propagation of the onMouseDown event, but this doesn’t seem to have any effect.
    • In fact, the onMouseDown event is never fired at all on any of the childs of the draggable element.


    Expected/Desired behaviour: when clicking the white box, the colored <motion.div> element should not scale up and/or follow the cursor when dragging.

    Is there a way to do this?

    opened by rijk 22
  • [BUG] Testing AnimatePresence with RTL

    [BUG] Testing AnimatePresence with RTL


    Describe the bug I'm using AnimatePresence to animate the enter & exit of a modal based on a boolean prop. The issue comes when I want to test, with React Testing Library, the rendering of the AnimatePresence childrens. I get an error and I'm not able to resolve the issue.

    To Reproduce

    // Modal.tsx
    import React from 'react'
    import { AnimatePresence } from 'framer-motion'
    import { ModalBackground, ModalContainer } from './styles'
    interface ModalProps {
      isOpen: boolean
    const Modal: React.FC<ModalProps> = ({ children, isOpen }) => {
      return (
          {isOpen && (
              initial={{ opacity: 0, backdropFilter: 'blur(0px)' }}
              animate={{ opacity: 1, backdropFilter: 'blur(4px)' }}
              exit={{ opacity: 0, backdropFilter: 'blur(0px)' }}
              transition={{ duration: 0.5 }}
                initial={{ y: '100%' }}
                animate={{ y: 0 }}
                exit={{ y: '100%' }}
    export default Modal
    // Modal.test.tsx
    import React from 'react'
    import Modal from './Modal'
    import { render } from '@testing-library/react'
    describe('Modal', () => {
      const MockComponent = () => <span />
      it(`doesn't render any children`, () => {
        const { container } = render(
          <Modal isOpen={false}>
            <MockComponent />
      it(`renders the modal`, () => {
        const { findByTestId } = render(
          <Modal isOpen>
            <MockComponent />
    TypeError: Cannot read property '1' of null
      console.error ../node_modules/react-dom/cjs/react-dom.development.js:19814
        The above error occurred in one of your React components:
            in Unknown (created by ForwardRef(MotionComponent))
            in ForwardRef(MotionComponent) (created by ModalContainer)
            in ModalContainer (at Modal.tsx:34)
            in div (created by ForwardRef(MotionComponent))
            in ForwardRef(MotionComponent) (created by ModalBackground)
            in ModalBackground (at Modal.tsx:26)
            in PresenceChild (created by AnimatePresence)
            in AnimatePresence (at Modal.tsx:24)
            in Modal (at Modal.test.tsx:20)

    Additional context The error only happens when I pass the boolean prop isOpen as true. As false doesn't render anything as expected.

    Any ideas?

    opened by Yagogc 22
  • [BUG] AnimatePresence height animation with padding doesn't work

    [BUG] AnimatePresence height animation with padding doesn't work

    1. Read the FAQs 👇

    2. Describe the bug

    When using AnimatePresence with some padding in the div that you are animating w/ height animation, the height calculation breaks and only animates the height to the (internal height - padding), both in and out.

    3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

    If you remove the padding: within the div css, you can see how much more smooth the animation is.

    4. Steps to reproduce

    Animate height on a div that has padding.

    5. Expected behavior

    Height should go from 0 to the height calculated by the browser for "auto".

    6. Video or screenshots

    Here's a gif of how it looks in my application:

    You can see the div underneath "snaps" because of all the height that still exists due to the padding.

    7. Environment details

    Tested in chrome

    bug wontfix 
    opened by snowl 20
  • [QUESTION] How to Delay Children Animations with AnimatePresence

    [QUESTION] How to Delay Children Animations with AnimatePresence

    Describe the bug I am using AnimatePresence on a simple example to fade in pages as they are mounted/unmounted. This works as expected. What I am struggling with is delaying the individual children animations on each page to wait until after the fade has completed first.

    Using Pose and the PoseGroup I accomplished this with code similar to this:

    const Transition = posed.div({
      enter: {
        opacity: 1,
        transition: { duration: 300 },
        delay: 300,
        beforeChildren: true
      exit: { opacity: 0, transition: { duration: 300 } }

    With Framer Motion and AnimatePresence my code looks similar to this :

    const variants = {
      initial: {
        opacity: 0,
      enter: {
        opacity: 1,
        transition: {
          duration: .3,
          delay: .3,
          when: 'beforeChildren',
      exit: {
        opacity: 0,
        transition: { duration: .3 },

    To Reproduce Code Sandbox - Github Repo -

    1. Go to
    2. Navigate between the pages to see the basic page fade.
    3. Navigate to the "Animated" page. The list of items should do a stagger fade in but that animation occurs at the same time as the page fade so you don't see it.

    Expected behavior I expect the top level page fade to occur followed by the children animations. Right now all animations are occurring at the same time.

    opened by ryanwiemer 19
  • Allowing `bounce`/`stiffness` spring option combination

    Allowing `bounce`/`stiffness` spring option combination

    Currently, springs can be defined either as duration/bounce or stiffness/damping.

    The former was introduced as an easier way of defining the physically-based spring options but requires setting a duration. It might instead be the case that we want to play instead with strength of the spring (stiffness) while maintaining the overall feel of how the spring comes to reset.


    opened by mattgperry 0
  • Removing ability to start animations within the render function

    Removing ability to start animations within the render function

    In the early days of Framer, back before concurrent rendering, people would write code like this

    function Component() {
      const controls = useAnimationControls()
      controls.start({ x: 100 })
      return <motion.div animate={controls} />

    Because it usually worked (even though it was always a poor idea). However now with concurrent rendering, this is likely to break as components can be rendered multiple times, or prospectively with props that don't end up committed to the DOM.

    This PR changes the behaviour here so that rather than obfuscating this by saving up pending animations on the initial render, we throw an error.

    opened by mattgperry 0
  • Custom SVG component

    Custom SVG component


    SVG components are treated differently to HTML components. Currently motion(CustomComponent) assumes components are HTML elements. This PR allows a flag to be set when the component receiving the ref is an SVG: motion(CustomCircleComponent, { svg: true })

    opened by mattgperry 0
  • Multidimensional reorder

    Multidimensional reorder

    This PR adds multidimensional reordering to Reorder components.

    Continuation of Fixes

    opened by mattgperry 0
  • [BUG] useScroll() with container option behave strangely

    [BUG] useScroll() with container option behave strangely

    Describe the bug

    I set container for useScroll() AND if there is some element before container. useScroll() would be affected and looks like it is working.

    Codesandbox and how to reproduce

    The reproduction is a tweaked version from track-element-position. The tweaks:

    1. I add a container in #58948A with fix height and overflowY: "auto" to make it scrollable.
    2. To get Item the container, I use react Context (ContainerRefContext)
    3. A div in #21434E just to simulate the scenario

    Please comment/un-comment the #21434E div to see how different useScroll() behaves. With no other element before the container, the progress is filled. But if there are elements taking space before container, the progress would not able to be filled.

    It's easier to explain it by video.

    Expected behavior

    useScroll() should not be affected by what other elements placed on the docuemnt.

    Environment details

    Windows 10 21H2 chrome 108.0.5359.125

    opened by QzCurious 0
Festina Lente
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Poimandres 24.7k Dec 28, 2022
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16:

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

Mustafa Nabavi 6 Jun 5, 2022
lottery smart contract with react UI, Now ready to interact

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Akshay Kurhekar 1 Dec 19, 2021
Part of the 'merged', multi-currency cryptowallet soon to be published for production by the ArcaneCorporations company.

ETH-Wallet A simple ethereum wallet coded with the help of the web3.js library for ease of account-management, the ethereumjs-tx library for mediating

null 5 Dec 5, 2021
CoWIN Vaccination Tracker, Below is the PRODUCTION LINK this is updated at end of each day. To see any latest Updates, please check the documentation

CoWIN Vaccination Slots Checking App. CoWIN Vaccination Slots Checking App is a user-friendly website that allow users to find vaccine in nearby avail

Stephin Reji 31 Jan 28, 2022
Tina is an open source editor that brings visual editing into React websites. Tina empowers developers to give their teams a contextual and intuitive editing experience without sacrificing code quality.

Tina is an open-source toolkit for building content management directly into your website. Community Forum Getting Started Checkout the tutorial to ge

Tina 8.2k Jan 1, 2023
A style export tool that live edits and exports code ready to copy / paste

Awesome Title Generator A style export tool that live edits and exports code ready to copy / paste. Features Edits text and live previews it CSS and R

Crhistian de Oliveira 19 Oct 7, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
A spring that solves your animation problems.

React-Motion import {Motion, spring} from 'react-motion'; // In your render... <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div

Cheng Lou 21.3k Jan 5, 2023
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems

DORAI UI Accessible, unstyled, open-sourced and fully functional react component library for building design systems Documentation site coming soon St

Fakorede Boluwatife 38 Dec 30, 2022
Scratch Incubator hosts a number of interesting, open-source, and arguably useful experiments and tools.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

null 6 Jul 6, 2022
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Create, Export, Share, and Use any Shapes of your choice. View Demo · Report Bug · Request Feature ?? Introducing TryShape TryShape is an opensource p

TryShape 148 Dec 26, 2022
This web application aim to produce an contest notifier utility and a modern open-source compiler.

This web application aim to produce an contest notifier utility and a modern open-source compiler. The current features of the application include : Code Runner , Upcoming and Ongoing Contests.

ABHAY GUPTA 6 Dec 3, 2022
Open Source Website where you can manage your information and artworks of your fursona(s)

MyFursona About this project MyFursona is an open source project where users can manage their artworks, info (such as biography and interests), and lo

MyFursona 23 Jan 7, 2023
JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. 🚀

JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.

JSON Hero 7.2k Jan 9, 2023
WPPConnect/mobile is an open source project with the objective of automating whatsapp web using the android or ios mobile browser and being able to perform all the functions of our wa-js project

WPPConnect/mobile is an open source project with the objective of automating whatsapp web using the android or ios mobile browser and being able to perform all the functions of our wa-js project, so it is possible to create a customer service, media sending, intelligence recognition based on artificial phrases and many other things, use your imagination to change and modify this project or collaborate on improvements...

null 11 Dec 28, 2022
An open source application to create, manage and embed contact forms on static/dynamic sites with no code

Formify is an open source application that lets you create, manage and embed contact forms on any site without writing code. This project is done as a

Basharath 37 Dec 26, 2022
Easy to maintain open source documentation websites.

Docusaurus We are working hard on Docusaurus v2. If you are new to Docusaurus, try using the new version instead of v1. See the Docusaurus v2 website

Facebook 40.8k Jan 2, 2023
Open-source project which generates the Fortnite Item Shop in an image similar to the in-game design.

Fort-Shop Fort-Shop is a unique project which generates the current Fortnite Item Shop into a stylized image, similar to the new In-Game design (refer

im2rnado 25 Jan 5, 2023