Scroll Animations using Framer Motion in React

Framer Motion is a popular library for animations in React. You can use it to create smooth scroll animations with the useAnimation hook and the motion.div component.

Here’s a working example that demonstrates how to use Framer Motion for scroll-based animations in React:

Steps:

Install Framer Motion: First, make sure Framer Motion is installed in your project.

npm install framer-motion

Create the Scroll Animation Component: We’ll create a component where an element animates based on the scroll position.

import React, { useEffect, useState } from 'react';
import { motion, useAnimation } from 'framer-motion';

const ScrollAnimation = () => {
  const [scrollY, setScrollY] = useState(0);
  const controls = useAnimation();

  // Update scroll position on scroll event
  const handleScroll = () => {
    setScrollY(window.scrollY);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  // Define the scroll animation based on scroll position
  useEffect(() => {
    controls.start({
      opacity: 1 - scrollY / 500, // Make the element fade out as the page scrolls
      y: scrollY / 2, // Move the element vertically based on scroll
    });
  }, [scrollY, controls]);

  return (
    <div style={{ height: '150vh' }}> {/* Add extra height to make scrolling visible */}
      <motion.div
        animate={controls}
        transition={{ type: 'spring', stiffness: 100 }}
        style={{
          background: '#3498db',
          width: '200px',
          height: '200px',
          margin: '50px auto',
          textAlign: 'center',
          lineHeight: '200px',
          color: 'white',
        }}
      >
        Scroll Me
      </motion.div>
    </div>
  );
};

export default ScrollAnimation;

Explanation:

useState and useEffect:

• scrollY: Tracks the scroll position.
• handleScroll: A function that updates the scroll position whenever the user scrolls.
• useEffect: Sets up the scroll event listener and cleans it up when the component unmounts.

motion.div:

• The motion.div component is used instead of a regular div to animate its properties.
• The animate={controls} prop applies the animation controls we set up using useAnimation.

scroll-based animation:

• The opacity changes as scrollY increases (it fades out as you scroll).
• The y property moves the element vertically, with its position depending on how far down the page you’ve scrolled.

Styling:

• The element is given a fixed width and height to make it visible, and margin is applied for positioning.

Key Concepts:

• motion.div: This is a Framer Motion component that enables animating standard HTML elements like divs.
• useAnimation: A hook used to control the animation programmatically. This is useful for responding to dynamic values, such as scroll position.
• transition: Defines the animation behavior, like the type of animation and stiffness (how smooth it is).

Final Notes:

• You can modify the animation properties based on your needs (e.g., changing scale, rotation, or x/y positions).
• Make sure your page has enough content to scroll and trigger the animation.

This should give you a smooth, scroll-based animation effect using Framer Motion!

For more article, visit https://codeymaze.com