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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!