Entrance Animations Collection

Usage Guide

Basic Implementation

<div class="box fade-in animate">Content</div>

JavaScript Trigger (on scroll, click, etc.)

// Add animation class when element is in viewport
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate');
        }
    });
});

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

Scroll Animations with Modern CSS

See 04_scroll-reveal.html for native CSS scroll-triggered animations using animation-timeline: view()

Best Practices

• Performance: Use transform and opacity for animations (GPU-accelerated)
• Timing: Keep entrance animations under 1 second for best UX
• Reduced Motion: Respect user preferences with @media (prefers-reduced-motion: reduce)
• Stagger Delays: Use 0.1-0.2s delays between items for natural flow
• Reusability: Create utility classes for common animations
• Fallbacks: Elements should be usable even if animations don't play

Accessibility Considerations

• Disable or reduce animations for users who prefer reduced motion
• Ensure content is readable even without animations
• Don't rely solely on animation to convey important information
• Test with keyboard navigation and screen readers

Reduced Motion Example

@media (prefers-reduced-motion: reduce) {
    .animate {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}