Scroll Reveal Animation in React using Framer Motion
Scroll Reveal Animation in React using Framer Motion
Framer Motion is a simple yet powerful motion library for React that provides a wide range of tools and components to easily create fluid and visually appealing animations in your React application. With over 2 million weekly installs on npm, it is easily one of the most popular animation libraries available.
Install Framer Motion
Assuming you already have your react application running (if not, quickly run npm create vite@latest my-app -- --template react-ts), install framer motion using the command below:
npm install framer-motion
Explanation
Here's what's happening in the code:
`initial`: Sets the initial state of the animation (opacity: 0, y: 50).
`whileInView`: Sets the animation state when the element is in view (opacity: 1, y: 0).
`viewport`: Configures the animation to only trigger when the element is in the viewport (once: true).
`transition`: Sets the animation duration (0.5 seconds).
#framermotion #reactjs #animation