Trigger state-based React animations using 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 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.