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

Last update: Jul 30, 2022

Framer Motion

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


Chat on Discord


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

Docs

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

Or checkout our examples for inspiration.

Contribute

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

License

Motion is MIT licensed.

GitHub

https://github.com/framer/motion
Comments
  • 1. [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.

    Reviewed by chrisdrackett at 2019-07-10 17:22
  • 2. [BUG] 5.0 Failed to compile with create-react-app

    Failed to compile.
    
    ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
    Can't import the named export 'Children' from non EcmaScript module (only default export is available)
    
    Reviewed by semihraifgurel at 2021-10-27 20:37
  • 3. [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, https://www.framer.com/motion/, 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?

    Reviewed by mackan92 at 2019-10-15 14:22
  • 4. [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.

    Reviewed by danprince at 2019-07-11 12:54
  • 5. 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
    Module.<anonymous>
    src/pages/index.js:81
      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.

    Reviewed by rchrdnsh at 2019-07-13 04:52
  • 6. 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 https://codesandbox.io/s/framer-motion-sandbox-c7urd).

    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: https://codesandbox.io/s/example-growing-container-t3sq2 -> but of course, without setting fixed heights (it also animate when content changes).

    Reviewed by rijk at 2019-08-09 08:35
  • 7. [BUG] Laggy in Firefox

    Description

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

    CodeSandbox

    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). https://www.framer.com/api/motion/examples/

    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}>
      <ShareBar>
        <QuickShareBar>
          <FacebookShareButton url="https://google.com/">
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <TwitterShareButton url="https://google.com/">
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <EmailShareButton url="https://google.com/">
            <EmailIcon size={32} round />
          </EmailShareButton>
        </QuickShareBar>
      </ShareBar>
    </motion.div>
    

    Steps to reproduce

    Steps to reproduce the behavior:

    1. Go to https://www.framer.com/api/motion/examples/
    2. Scroll down to any animation
    3. See laggyness

    Expected behavior

    The animation should not be laggy. See following Video: https://streamable.com/g97k9

    Video

    Current behavior in Firefox: https://streamable.com/m392r

    Environment details

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

    Reviewed by visualcookie at 2020-01-20 15:00
  • 8. [BUG] Testing AnimatePresence with RTL

    Hi!

    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 (
        <AnimatePresence>
          {isOpen && (
            <ModalBackground
              key="modal-background"
              initial={{ opacity: 0, backdropFilter: 'blur(0px)' }}
              animate={{ opacity: 1, backdropFilter: 'blur(4px)' }}
              exit={{ opacity: 0, backdropFilter: 'blur(0px)' }}
              transition={{ duration: 0.5 }}
            >
              <ModalContainer
                key="modal-container"
                initial={{ y: '100%' }}
                animate={{ y: 0 }}
                exit={{ y: '100%' }}
                data-testid="modal-container"
              >
                {children}
              </ModalContainer>
            </ModalBackground>
          )}
        </AnimatePresence>
      )
    }
    
    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 />
          </Modal>
        )
    
        expect(container.firstChild).toBeFalsy()
      })
    
      // THIS TEST FAILS
      it(`renders the modal`, () => {
        const { findByTestId } = render(
          <Modal isOpen>
            <MockComponent />
          </Modal>
        )
    
        findByTestId('modal-container')
      })
    })
    
    
    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?

    Reviewed by Yagogc at 2019-08-20 16:05
  • 9. [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

    https://codesandbox.io/s/framer-motion-animatepresence-padding-issue-zqxrk?fontsize=14

    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: https://gfycat.com/weirdachingdogwoodclubgall

    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

    Reviewed by snowl at 2019-10-18 04:11
  • 10. Did animation timing/easing defaults change between v1 and v2?

    Hey guys, very sorry to ignore the template but I don't have a great way of immediately reproducing this.

    I'm upgrading from 1.11.1 to 2.6.15 and my animations look different. For the most part, it's as if the default easing transition has changed. Things look like they speed up just towards the end, or animations that used to look synchronized due to timings seem slightly out of sync.

    The changelog doesn't indicate anything about this changed but it definitely seems like something did. Upgrade notes don't seem to indicate anything we should do as part of our upgrade, either. Am I overlooking something obvious?

    If we determine that this is a bug, I can see about putting together sandboxes to reproduce. I'm also happy to link you to some videos demonstrating differences if you'd like to send me an email address.

    (Changed the title a few times cause multitasking and brain is bad no good working, sorry 🧠)

    Reviewed by subvertallchris at 2020-09-22 18:55
  • 11. [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 - https://codesandbox.io/s/github/ryanwiemer/gatsby-using-page-transitions Github Repo - https://github.com/ryanwiemer/gatsby-using-page-transitions/blob/master/src/components/Layout.js

    1. Go to https://transitions.netlify.com/
    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.

    Reviewed by ryanwiemer at 2019-08-26 17:47
  • 12. Error when using AnimatePresence / motion.div TypeError: Cannot read properties of undefined (reading '_owner')

    hey all,

    using framer-motion in a nextjs 12 / react 18 stack

    had animations working just fine a few days ago, a clean 'fade in / fade out' then today, i noticed that the animations got very choppy and take nearly 10 seconds to reveal the component. I started receiving this error as well

    TypeError: Cannot read properties of undefined (reading '_owner') TypeError: Cannot read properties of undefined (reading '0')

    here is how I'm using it..

    {viewAgileModal && (
           <AnimatePresence>
               <motion.div
                 key={"about modal"}
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
               >
                 <AgileAboutModal />
               </motion.div>
           </AnimatePresence>
             )}
    

    has the package deprecated or something? i haven't changed a thing since a few days ago and it was working just fine

    Reviewed by ikjudd at 2022-08-02 00:11
  • 13. [BUG] Using `MotionCanvas` from "framer-motion-3d" instead of `Canvas` from "@react-three/fiber" causes `@react-three/fiber` components to throw `Uncaught *COMPONENT* is not part of the THREE namespace! Did you forget to extend? ` errors at runtime

    Using MotionCanvas from framer-motion-3d instead of Canvas from @react-three/fiber causes wrapped @react-three/fiber components to throw Uncaught *COMPONENT* is not part of the THREE namespace! Did you forget to extend? errors at runtime.

    3. IMPORTANT: Provide a CodeSandbox reproduction of the bug https://codesandbox.io/s/busy-nightingale-9w4v6t?file=/src/App.tsx

    4. Steps to reproduce Run the project

    5. Expected behavior MotionCanvas to be interchangeable with Canvas

    6. Video or screenshots //

    7. Environment details framer-motion-3d version: 6.5.1 @react-three/fiber version: 8.2.2

    Reviewed by hood at 2022-07-28 10:00
  • 14. [FEATURE] Add progress control for transition using motion values

    I want to make an scroll linked layout animation, but currently, there is no way to use motion values to control layout animations. I'm thinking if we can make transition function not a time controlled function, but a progress value(between 0 and 1) controlled function, with an extra parameter, it can solve this problem, and also make many other animation easily controlled by scroll-progress.

    Though many animation can be done by motion value, but it requires user to manually do value transitions for each properties, with this feature, things would be much easier.

    Also this enables easy translate between scroll triggered animation and scroll linked animation, which during my development experience, happens a lot. Many animations are designed as key-frame animation, but sometimes we want make them scroll-linked, not event triggered animations. With this new API we can easily use the key-frame animation with one extra parameter, then it is done.

    Describe the solution you'd like

    function GeneralTransition() {
      const { scrollYProgress } = useScroll();
      return (
        <>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ progress: scrollYProgress }}
          >
            Something
          </motion.div>
        </>
      );
    }
    function LayoutTransition() {
      const { scrollYProgress } = useScroll();
      const [visible, setVisible] = useState(false);
      return (
        <>
          <div className="flex">
            {!visible && <motion.div layoutId="movingPart" onClick={() => setVisible(true)}>Something</motion.div>}
          </div>
    
          <div className="relative">
            {visible && (
              <motion.div
                layoutId="movingPart"
                transition={{ progress: scrollYProgress }}
              >
                Something
              </motion.div>
            )}
          </div>
        </>
      );
    }
    

    Describe alternatives you've considered For scroll linked layout animation, i can only think of re-implement the complicated layout animation logic and interpolate all changed style/position with motion value.

    Reviewed by zhangcx93 at 2022-07-26 04:23
  • 15. [BUG] Layout transition ignored when dragging

    Layout does not transition while parent element is being dragged.

    Codesandbox example Try to drag the element and see how the transition stops animating.

    Gif

    Reviewed by mikkmartin at 2022-07-23 06:39
  • 16. Page Scroll to bottom when we use AnimatePresence on next Js hash routing [Ios] [BUG]

    1. Read the FAQs 👇

    2. Describe the bug

    1. I was using AnimatePresence for page transition
    2. page transition is working fine
    3. but Ios devices when i try to route using hash
    4. the page navigate to bottom of the page

    my code image

    video: https://youtu.be/OpFKXy-__Tc

    Reviewed by anshuopinion at 2022-07-19 06:54
Related tags
A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance

A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance. Works with solid-js

Jul 31, 2022
react-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - ?? Library showing animation of number changes in react.js

Jul 27, 2022
(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

react-anime (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js. Just place an <Anime> component and what

Aug 6, 2022
✌️ A spring physics based React animation library
✌️ 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

Jul 31, 2022
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.

Jul 28, 2022
✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

Aug 4, 2022
✌️ A spring physics based React animation library
✌️ 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

Aug 5, 2022
🎰 Library showing animation of number changes in react-native
🎰  Library showing animation of number changes in react-native

react-native-animated-numbers Library showing animation of number changes in react-native If you want web version in react.js download react-animated-

Jul 27, 2022
SimpleReveal - A simple scroll animation library in React

SimpleReveal A simple scroll animation library in React Zero-dependency No additional DOM element Simple and predictable API SSR Support (Next.js, Gat

May 29, 2022
A small but powerful animation library for React, built on Web Animations API
A small but powerful animation library for React, built on Web Animations API

A small but powerful animation library for React, built on Web Animations API

Aug 3, 2022
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Aug 3, 2022
⚛️ Perform animation and transition of React component with ease.

⚛️ Perform animation and transition of React component with ease.

Aug 4, 2022
An animation package for react-ui-ox and the community
An animation package for react-ui-ox and the community

react-ui-ox-anim An animation package for react-ui-ox and the community Getting Started Add as a dependency npm install react-ui-ox-anim Add as a dev

Nov 3, 2021
React components for the Web Animations API - http://react-web-animation.surge.sh
React components for the Web Animations API - http://react-web-animation.surge.sh

react-web-animation react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Demos Check out how you

Jul 27, 2022
Animation engine designed for React
Animation engine designed for React

react-tweenful Looking for an amazing React library for animating stuff? Look no more, we've got you covered! Demo https://teodosii.github.io/react-tw

Jul 31, 2022
React particles animation background component
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

Jul 30, 2022
Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Jun 13, 2022
Simple typing text animation in React component

react-typing-text-animation - Simple typing text animation in React component

Jan 3, 2022
react-bubbly-effect-button🧼 Bubble animation on button
 react-bubbly-effect-button🧼 Bubble animation on button

react-bubbly-effect-button?? Bubble animation on button

Jul 17, 2022