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

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.

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)

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?

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.

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.

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

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)

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

See: https://codesandbox.io/s/framer-motion-block-mousedown-inside-draggable-item-3ecgd

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?

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?

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

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.

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.

Closes https://github.com/framer/motion/issues/1475

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.

Fixes https://github.com/framer/motion/issues/1177

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

This PR adds multidimensional reordering to Reorder components.

Continuation of https://github.com/framer/motion/pull/1685 Fixes https://github.com/framer/motion/issues/1400

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.

https://user-images.githubusercontent.com/38932402/210058175-313fc57d-813f-4cdf-bfd6-49c72b91274c.mp4

https://user-images.githubusercontent.com/38932402/210058203-8ffe41b5-6e44-491e-ae40-2de7bbea81b3.mp4

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