React Animations

To use animations in React with motion, you need to wrap any JSX / TSX element with a motion component.

Easiest example is to wrap a div with a motion.div component.

Skewed Button

For example, here's a button animation that we built in the video lesson

Here, the button is wrapped as a motion.button. With that, we get all the benefits of animating different properties on a button. That includes, and is not limited to

• rotate
• skew
• scale
• box-shadow
• pretty much anything that you'd like to animate

Types of animations

Now, since you have access to all these properties, let's go ahead and try animating the same buttons, but with a different touch this time.

Transitions

A transition is a property that allows you to change duration, the type of animation, the easing function, and more.

Think of it as a way to control how the animation behaves. You can make it faster, slower, springy, etc.

To set a transition property, simply add a transition prop to the motion component.

Let's take a look at an example of hover animations with different transitions.

Notice how the spring animations introduce bounce, we are going to talk about all of these transitions later in the next chapters.

The transitions, motion.divs, etc are all tools that you can play around. Ultimately, the goal is to create animations that are not only visually appealing but also serve a purpose.

The goal of an animation is to enhance the user experience or allow them to explore the UI in a more engaging way. If used correctly, animations can be a game changer.