1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Trigger state-based React animations using Framer Motion

    Kyle GillKyle Gill
    reactReact

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.