REVEAL ON SCROLL

Watch elements animate into view as you scroll

Directional Fades

↑

Fade Up

Elements slide up as they fade in

↓

Fade Down

Elements slide down as they appear

←

Fade Left

Sliding in from the right

→

Fade Right

Sliding in from the left

Scale Effects

⬆

Scale Up

Growing from smaller size

⬇

Scale Down

Shrinking from larger size

↻

Rotate In

Rotating while scaling

3D Transformations

↕

Flip X

3D horizontal flip effect

↔

Flip Y

3D vertical flip effect

◉

Blur In

From blurred to sharp

Staggered Animation

Animated Progress

Text Animation

Every word appears with style

Implementation Code

// Intersection Observer for Reveal Animations
const revealElements = document.querySelectorAll('.reveal-element');

const revealObserver = new IntersectionObserver(
    (entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('revealed');
                
                // Stagger children if present
                const children = entry.target.querySelectorAll('.stagger-item, .word');
                children.forEach((child, index) => {
                    setTimeout(() => {
                        child.style.transitionDelay = `${index * 100}ms`;
                    }, 0);
                });
                
                // Optional: Stop observing after reveal
                observer.unobserve(entry.target);
            }
        });
    },
    {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    }
);

// Start observing all elements
revealElements.forEach(element => {
    revealObserver.observe(element);
});