Use Framer Motion to create scroll animations in React.js

In this video we are going to use Framer Motion in a React.js environment to create scroll animations, meaning that page elements animate in as they come into the viewport and animate out as they leave the viewport. 00:00 Intro 00:20 Framer Motion 00:43 See the final product 01:16 Code environment 01:54 Initial code walkthrough 02:20 Importing Framer Motion 02:48 Add Motion component 03:00 Adding "initial", "whileInView", and "viewport" attributes 03:50 Setting properties and values 05:25 Transition Property 06:16 Progress So Far 06:55 Setting movement in Y coordinate 08:15 Show progress so far 08:30 Add Motion module to other elements 09:19 Changing delay on other elements to create timed animation 09:52 Progress so far 10:25 Add Motion module to all elements in document 10:54 Outro