/* * ═══════════════════════════════════════════════════════════════════ * EVR ANIMATION TOOLKIT — evr-animations.css * Version 1.0 | June 2026 * * HOW TO USE * ────────── * 1. Link this file in your HTML : * * * 2. Add the GSAP + ScrollTrigger CDN scripts before : * * * * * 3. Add classes to any HTML element: * * evr-reveal → Signature left-to-right wipe (images, panels) * evr-reveal-left → Right-to-left wipe (left side of split layouts) * evr-reveal-right → Left-to-right wipe (right side of split layouts) * evr-reveal-up → Upward fade (headings, body copy, CTAs) * evr-fade → Simple opacity fade (subtle secondary elements) * evr-stagger → Wrap a grid — children stagger in automatically * * 4. To delay an element (useful for sequencing text): *

...

* * ═══════════════════════════════════════════════════════════════════ */ /* ── Initial hidden state ──────────────────────────────────────────── All animated elements start invisible so there's no flash of unstyled content before GSAP sets their initial animation state. GSAP makes them visible immediately on init. ─────────────────────────────────────────────────────────────────── */ .evr-reveal, .evr-reveal-left, .evr-reveal-right, .evr-reveal-up, .evr-fade, .evr-stagger > * { visibility: hidden; } /* ── Reduced motion — accessibility ───────────────────────────────── Users who have requested reduced motion in their OS settings see elements instantly with no animation. Never skip this. ─────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .evr-reveal, .evr-reveal-left, .evr-reveal-right, .evr-reveal-up, .evr-fade, .evr-stagger > * { visibility: visible !important; clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } }