Building a Reusable Component that Animates on Scroll

Learn how to make an unstyled FadeUp component that animates on scroll and can be reused throughout your app. Built with React and Framer Motion. 🚀 Sign up to hear about my new course: https://buildui.com/courses/advanced-... 💻 Check out the code from the demo: https://github.com/samselikoff/2024-1... Timestamps: 0:00 - Intro 2:11 - Extracting a component for useInView 4:25 - Using variants for state-based animation 5:39 - Animate on the initial reveal only 7:29 - Animating the Y property 8:50 - Trying out our component on a new page 9:30 - Adding a delay prop 10:47 - Adding a duration prop 12:54 - Final demo 14:40 - New course coming soon!