SPECIALITY: React - Motion (6h-8h)

React has many libraries to help you develop quality sites. One interesting library is Motion, which helps us bring a site to life with professional-looking animations.

A naming note so you are not confused while searching: this library used to be called Framer Motion, and most tutorials and Stack Overflow answers still call it that. It is the same library — it was renamed to Motion and now lives at motion.dev. The old framer-motion package still works and is published at the same version, so either import works. New projects should use motion.

In this guide you can practice your React skills at the same time as using a well known animation library like you would in the real working life.

Play around with their fun documentation, try it out in your own code and have fun!

Understand how to use libraries in React

Understand what an animation library is

Understand what micro interactions are

Be able to use Motion to animate elements in React

Be able to use animations in a sensible way

Create a page where elements are brought to the attention of the user at the correct time.

Here are examples of micro interactions that you could do. Try to be creative and do your own!

Create at least two animated elements on your page (for example a div and an SVG)

Submit a link to GitHub repository and live version. If you want to show it in the gallery you can record a gif and put it to the image or gif field ;-)