Animate a React component's position with the animate prop from Framer Motion

Animate a React component using an array of keyframes from Framer Motion

Animate buttons using gesture controls like whileTap and onDrag from Framer Motion

Create loading animations with Framer Motion's transition prop

Trigger state-based React animations using Framer Motion

Link complex animations together with variants from Framer Motion

Animating React Components with Framer Motion

Learn how to animate components based off of React state. Imperatively triggering an animation is a common use case, and one that is easily facilitated with state and Framer's animation APIs. 

You can use it to cycle a component through specific states like rotating or changing the position of an element.

Check out the [official docs](https://www.framer.com/api/motion/utilities/#usecycle) for more information about the `useCycle` hook for toggling between multiple states.


Instructor: [0:00] This icon doesn't have any interactivity or animation, so wrap it in a motion.div to enable framer-motion APIs on the element.

[0:10] You can add an animate prop for an attribute like rotation with a hard-coded numeric value, but you will only see the animation on the initial page load.

[0:20] If you're instead passing a value managed by React State, you can programmatically adjust the value the icon should animate to. Assign a variable of rotation and then set a method called setRotation defaulting the value to .

[0:35] Replace the hard-coded numeric value with a new rotation variable. Make sure to import useState from React. Add a new onClick method to the motion element that sets the rotation to a new value, 180 degrees larger each time it's clicked. With each press, the icon will animate as it rotates another 180 degrees.

Course

Animating React Components with Framer Motion

Trigger state-based React animations using Framer Motion

Share this video with your friends