React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Learn how to use the react-spring library to animate our React applications. Start with the `useSpring` hook and end with the `useTransition` hook with React Router for transitions between your routes! 

You'll get the skills to begin using the react-spring library and add animation to your React components.

Pass a `to` property to React Spring's [useSpring]([https://www.react-spring.io/docs/hooks/use-spring](https://www.react-spring.io/docs/hooks/use-spring)) to chain together multiple animations asynchronously.

In addition to `props`, `useSpring` also returns `set` and `stop` methods. In this lesson you will see how the `stop` method doesn't abruptly stop your animation, but instead tries to reset your animation back to where it was before it took off.

Chain Together Multiple Animations With the useSpring Hook

In this lesson React Spring's [useSpring](https://www.react-spring.io/docs/hooks/use-spring) hook is used to animate CSS properties.

You will also learn how to use `animated` to extend native elements to receive animated values.

Animate Elements With the useSpring Hook

In this lesson, you'll learn how to implement smooth image scrolling using React Spring's [useSpring hook](https://www.react-spring.io/docs/hooks/use-spring)

You will use an `onMouseMove` event to get the image and mouse coordinates and `set` `useSpring` with the offset. You can then style the animated element with the `backgroundPositionX` and `backgroundPositionY` CSS properties. 

Animate CSS Background Position With the useSpring Hook

Using the `useTransition` hook from React Spring can make your todo list look and feel a lot more polished. 

In this lesson, you'll learn how to configure `useTransition` and its three animation states.

Create Smooth List Transitions With the useTransition Hook

React Spring's `useTransition` can be used with React Router to create smooth transitions between your routes!

In this lesson, you will configure `useTransition` and create its three animated states. You will then map over the transitions and return React Router's Switch and Routes wrapped in an `animated.div` element.

Spring Animation in React with React Spring

Christian Nwamba

Course Content