Transforming Websites with Framer Motion

Introduction

• Framer Motion is a library for adding animations and interactions to React websites.
• Capable of scroll-based animations, hover effects, drag controls, layout animations, etc.
• The tutorial aims to help developers create clean, springy interactions using Framer Motion.

Prerequisites

• Basic React skills:
  • Creating components
  • Using props
• Basic CSS understanding is helpful but not mandatory.

Overview of Framer Motion

• Focus on the motion component as the core unit for animations.
• Similar to JSX but prepends "motion." to standard HTML elements.
• Alternative approaches exist (e.g., hooks) but will not be covered in this tutorial.
• For advanced tutorials, refer to the presenter’s YouTube channel.

Setup

• Set up a barebones React project (Next.js used in this case).
• Install Framer Motion: yarn add framer-motion or npm install framer-motion.
• Styles will primarily be inline.

Basic Animation Example

1. Creating a Motion Component:
   • Import motion from Framer Motion.
   • Create a basic motion.div for animations.
2. Initial and Animate Props:
   • Use initial and animate to define starting and ending states of animations.
   • Example: Rotate a box on mount.
3. Transition Prop:
   • Adjust animation speed and easing with the transition prop.
   • Easing types include ease-in-out, spring, etc.
4. Exit Animations:
   • Use the exit prop to define how components animate out when unmounted.
   • Wrap components with AnimatePresence for exit animations to work.

Gesture-Based Animations

• Hover Effects:
  • Use whileHover to define animations on hover, e.g., scale up the button.
• Click Effects:
  • Use whileTap to define animations on click, e.g., scale down and rotate the button.
• Using Motion Config:
  • Use motion.config to define transitions for multiple components at once.

Animation Controls

• Use animation controls to trigger animations on different components based on events.
• Example: Clicking a button rotates another element.
• Implement using useAnimation hook and passing controls to the animate prop.

View-Based Animations

• Animate components based on their position in the viewport.
• Use useInView for detecting if an element is in view.
• Example: Fading in a box as it comes into view.
• Options can limit the animation to trigger only once.

Scroll-Based Animations

• Create a progress bar that fills as the user scrolls down the page.
• Use useScroll to track scroll progress and animate elements based on scroll position.
• Example: Scale a div's height to represent scroll progress.
• Use useTransform for mapping scroll values to colors or other properties.

Conclusion

• All code examples will be available on GitHub for reference.
• The excellent documentation for Framer Motion is highly recommended for deeper understanding and advanced animations.
• Encouragement for interaction (likes and subscriptions) to motivate further tutorials.