Scroll Reveal Animations

Implementation Guide

Modern CSS Approach (Chrome 115+)

.fade-up {
    opacity: 0;
    animation: fadeUp linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Progressive Enhancement

Ensure content is accessible even without animation support:

/* Show content normally in unsupported browsers */
@supports not (animation-timeline: view()) {
    .fade-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

JavaScript Fallback (Intersection Observer)

For browsers that don't support animation-timeline: view():

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate');
        }
    });
}, {
    threshold: 0.1
});

document.querySelectorAll('.fade-up').forEach(el => {
    observer.observe(el);
});

Animation Range Explained

• entry 0% - Animation starts when element enters viewport
• cover 30% - Animation completes when element covers 30% of viewport
• Adjust these values to control when animations trigger and complete

Best Practices

• Performance: Use transform and opacity (GPU-accelerated properties)
• Reduced Motion: Respect prefers-reduced-motion media query
• Fallbacks: Always ensure content is visible without animations
• Testing: Test in multiple browsers and provide fallbacks
• Timing: Keep scroll animations subtle and quick (under 1s)
• Stagger: Use animation-delay for sequential reveals

Browser Support Strategy

• ✅ Modern Browsers: Use animation-timeline: view()
• ⚠️ Partial Support: Fall back to Intersection Observer
• ❌ No Support: Show content without animations