Framer Motion comes built in to all components in Framer, as it already powers all of the no-code animations in Framer. The no-code animations are generally very optimised, and we recommend to start with those. If you want something fully unique, you can leverage the techniques in this guide. Lets start by looking at a couple ways to animate in Framer Motion.
useAnimate provides a way of using the
animate function that is scoped to the elements within your component. It provides a
scope ref, and an
animate function where every DOM selector is scoped to this ref.
useAnimate returns two arguments, a
scope ref and an
animate function. The
scope ref must be passed to either a regular HTML/SVG element or a
animate function can now be used in effects and event handlers to animate elements. We can either use the scoped element:
Most animations will be performed with the
motion component and the
animate prop. There's a
motion component for every HTML and SVG element, for instance
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.