Creating interactive and animated components with React and Framer Motion

Overview

Framer Motion is an extremely powerful and lightweight library which allows you to easily create smooth and visually pleasing animations with loads of flexibility.

In this lesson we will look at how to create an interactive Popcorn Popper with React and Framer Motion, where each tap of the popcorn popper causes a kernel to explode out.

The finished product will look something like this:

Pre-requisites

• Basic knowledge of React, JavaScript, and CSS.
• Optionally some knowledge of Tailwind CSS, though you can use whichever CSS framework you are most comfortable with.
• A love for popcorn (not really).

What will you learn?

• How to create beautiful animations for your React projects and components with Framer Motion.
  • In particular, you will learn how to add smooth position, scale, and rotation animations.
• How to work with the useState and useRef React hooks.
• How to style layouts with Tailwind CSS.
• How to create a custom React use hook, in this case to manage creating and destroying popcorn kernel components on a timer.