Building Animations
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()
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.
Import from "framer-motion"
. 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 motion
component.
This scoped animate
function can now be used in effects and event handlers to animate elements. We can either use the scoped element:
<motion.div />
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 motion.div
, motion.circle
etc.
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.