React Day 4: Lifting State Up & Shared Data
Day 4 of React series. Understand how to share state between components by lifting state up to a common ancestor.
React
Exit Animations & AnimatePresence in Framer Motion
Unlock the ability to animate components out of the DOM with AnimatePresence, essential for modals and page transitions.
React Day 5: Styling Components & CSS Modules
Day 5 of React series. A complete guide to styling React components, from inline styles to scoped CSS Modules.
Framer Motion Variants & Staggering Children
Use Variants to organize animation states and effortlessly orchestrate complex staggered animations across component trees.
React Day 6: Debugging & React DevTools
Day 6 of React series. Guide to effective debugging in React using console, Strict Mode, and React Developer Tools.
Project 3: Staggered Sidebar Menu Animation
Create a production-ready collapsible sidebar menu that animates its items sequentially using staggerChildren.
React Day 7: useRef, Refs & Portals
Day 7 of React series. Master direct DOM manipulation with Refs and rendering outside the main tree with Portals.
Responsive Animations with CSS Variables in Framer Motion
Combine the power of CSS variables with Framer Motion to build animations that adapt perfectly to different screen sizes and states.
React Day 8: Context API & Prop Drilling
Day 8 of React series. Understand prop drilling and implement the Context API for efficient global state management.
Scroll Trigger Animations: whileInView & viewport
Easily trigger animations when elements enter the viewport using whileInView. Configure offsets and repeat behavior.