Animations: Slide up and reveal section

On page load: Slide up and reveal section

Animation on page load: slide up and reveal sections. Mimicking the animation effect of this website: https://bg.pragyan.fyi/.

Live Demo

This content will slide up and fade in on page load.

Code: OnPageLoadRevealSlide.jsx

// https://www.youtube.com/watch?v=T33NN_pPeNI
import { useState, useEffect } from 'react';

export default function OnPageLoadRevealSlide() {
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        setIsVisible(true);
    }, []);

    return (

        <section className="bg-gray-300 p-8 rounded-lg shadow-lg">
            <div
                className={`transform transition-all duration-700 ease-out ${
                    isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
                }`}
            >
                <p>This content will slide up and fade in on page load.</p>
                <img src="https://media.giphy.com/media/3o7aD2saalBwwftBIY/giphy.gif" alt="Slide In Animation" className="mt-4 rounded-lg shadow-lg" />
            </div>
        </section>

    );
}

On Scroll: slide up and reveal section

Animation on scroll: slide up and reveal sections. This animation is kind of useless. It doesn't add any value to the user experience. But it is a good exercise to learn how to use the Intersection Observer API with React and Tailwind CSS.

Live Demo

This content will slide up and fade in on scroll. 0

This content will slide up and fade in on scroll. 1

This content will slide up and fade in on scroll. 2

This content will slide up and fade in on scroll. 3

This content will slide up and fade in on scroll. 4

Code: OnScrollRevealSlide.jsx

import { useState, useEffect, useRef } from 'react';

export default function OnScrollRevealSlide() {
    const sectionRefs = useRef([]);;
    const [visibleMap, setVisibleMap] = useState({});;

    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const idx = entry.target.dataset.idx;;
                        setVisibleMap((prev) => ({ ...prev, [idx]: true }));;
                        observer.unobserve(entry.target);;
                    };
                });
            },
            { threshold: 0.1 }
        );;

        sectionRefs.current.forEach((section) => {
            if (section) observer.observe(section);;
        });;

        return () => {
            observer.disconnect();;
        };;
    }, []);;

    return (
        <main className="">
            {Array.from({ length: 5 }, (_, i) => (
                <section
                    key={i}
                    data-idx={i}
                    ref={(el) => (sectionRefs.current[i] = el)}
                    className={`mx-auto py-20 bg-gray-300 p-8 rounded-lg shadow-lg 
                            transform transition-all duration-1000 ease-out ${visibleMap[i] ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
                        }`}
                >
                    <div>This content will slide up and fade in on scroll. <span className='text-2xl'>{i}</span></div>
                    <img
                        src="https://media.giphy.com/media/3o7aD2saalBwwftBIY/giphy.gif"
                        alt="Slide In Animation"
                        className="mt-4 rounded-lg shadow-lg"
                    />
                </section>
            ))}
        </main >
    );
}