Is there a way to apply physics in framer motion?

Question

I'm currently experimenting around with react.js and the framer-motion library and I'm asking myself if there is way to apply physics to draggable components. I would like to implement a ball that falls down, when it was pulled it into the air. I already implemented a ball that is draggable around the screen, but without physics. So I'm asking myself if the 'framer-motion' library is the right choice for a project like that and if yes is there any example or documentation for that?

Thanks in advance.

Answer 1

Framer Motion supports spring animation as part of their API .

useEffect(() => {
  const controls = animate(x, 100, {
    type: "spring",
    stiffness: 2000,
    onComplete: v => {}
  })

  return controls.stop
})

For example you can define spring animation options:

export const spring = {
  ...
  gentle: {
    type: `spring`,
    mass: 1,
    damping: 50,
    stiffness: 100,
    velocity: 2,
  },
};

And use them within the variants prop.

const container = {
  expanded: {
    width: `100%`,
    transition: spring.gentle,
  },
  ...
};

// Usage example, animating `width` prop is not recommended
<motion.div animate="expanded" variants={container} ... > ... </motion.div>