Demon33 / react-animations-mini

A mini project to introduce how to use the react-motion library for animations in a React project.

Project Summary

This project is an introduction into animations using the react-motion library. There are many ways to accomplish animations in a react application from vanilla javascript, css, and many other libraries.

Live Example

Click Me!

Goals:

• Understand how to create simple transition animations with react-motion.

Resources:

• https://github.com/chenglou/react-motion
• https://www.pshrmn.com/tutorials/react/animation/react-motion/
• Follow this scrimba cast to learn about animations with the Motion component from the react-motion library: https://scrimba.com/casts/c67ygAr

Instructions:

1. Fork and clone. Run npm i to install dependencies.

2. Run npm start and check out the fully working to-do app in the browser. We will be adding animations to this app and take it to the next level.

   • Review the code and make sure that you understand what is going on before adding any animations.

3. Run npm i --save react-motion to install the animation library.

4. Follow along: https://scrimba.com/casts/cdNzpuk

Contributions

If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.

Copyright

© DevMountain LLC, 2017. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.