Animate blocks of content when scrolled into viewport

[salaami]

Trigger framer motion animation only when in view port. React hooks to the rescue.

[salaami]

There is actually a state hook in framer-motion library that handles exactly this. Check docs here and an example.

[salaami]

The animations that reveal content on a web page as you scroll down are often referred to as "scroll animations" or "scroll-triggered animations." These animations add a dynamic and engaging aspect to web design. In React, you can achieve such animations using libraries like "Framer Motion."

Here's a basic overview of how to implement scroll animations using React and Framer Motion for your portfolio page:

1. Installation: First, you need to install Framer Motion in your React project. You can do this using npm or yarn:

   npm install framer-motion

   or

   yarn add framer-motion

2. Component Structure: Create a React component that represents the section of your portfolio where you want the scroll animation to occur.

3. Import Framer Motion: Import the necessary components and functions from Framer Motion at the beginning of your component file:

   import { motion, useAnimation } from 'framer-motion';

4. Use useAnimation Hook: Inside your component, initialize an animation variable using the useAnimation hook:

   const controls = useAnimation();

5. Define Animation Variants: Create animation variants that specify how your content should animate when it becomes visible during scrolling. For example:

   const fadeIn = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
   };

6. Animate on Scroll: Use Framer Motion's AnimatePresence component to wrap the content you want to animate. Then, use the motion component with the animate and initial props to trigger the animation when the content is in the viewport:

   <AnimatePresence>
    <motion.div
      initial="hidden"
      animate={controls}
      variants={fadeIn}
      transition={{ duration: 0.5 }}
    >
      {/* Your content goes here */}
    </motion.div>
   </AnimatePresence>

7. Scroll Event Listener: Finally, add a scroll event listener to your component to detect when the content is within the viewport and trigger the animation using the start method of the controls variable:

   useEffect(() => {
    const handleScroll = () => {
      if (elementIsInViewport) {
        controls.start('visible');
      }
    };
   
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
   }, [controls, elementIsInViewport]);

   You'll need to implement elementIsInViewport logic to determine if the content is visible in the viewport.

With these steps, you can create scroll animations for your portfolio page using React and Framer Motion. Adjust the animation variants and scroll trigger logic to achieve the desired effect for each section of your portfolio.