/* ========================================== Cấu hình biến và Transition LUÔN hiển thị (Không ẩn ở đây - chỉ ẩn khi JS đã chạy) ========================================== */ .anim-item { /* Biến cấu hình mặc định */ --anim-duration: 700ms; --anim-delay: 0ms; --anim-easing: cubic-bezier(.22, .61, .36, 1); --anim-distance: 30px; /* QUAN TRỌNG: backface-visibility: hidden ĐÃ XÓA Lý do: gây lỗi render ảnh (trắng/biến mất) trên Safari iOS với PNG transparency và ảnh trong 3D transform context. Chỉ áp dụng cho rotate preset riêng bạch. */ } /* ========================================== Trạng thái ẨN ban đầu: CHỈ áp dụng khi JavaScript đã chạy thành công (JS thêm class "eam-js" vào thẻ ) Nếu JS bị chặn/lỗi → phần tử vẫn hiển thị bình thường ========================================== */ /* will-change ĐƯỢC QUẢN LÝ QUA JS (không khai báo ở đây). Lý do: Nếu viết trong CSS, tất cả element chưa active sẽ có GPU layer thường trực. Ví dụ: 60 .anim-item = 60 GPU compositor layers khi tải trang → Browser composite 60 layers mỗi frame trong khi cuộn → NGUYÊN NHÂN CHÍNH gây giật. Giải pháp: JS bật will-change trước khi animate, tắt ngay sau. */ .eam-js .anim-item:not(.anim-active) { opacity: 0; transform: translate3d( var(--anim-translate-x, 0px), var(--anim-translate-y, 0px), 0 ) scale(var(--anim-scale, 1)) rotate(var(--anim-rotate, 0deg)); } /* filter chỉ cho anim-blur-in — KHÔNG áp dụng cho tất cả element filter:blur(0px) vẫn tạo stacking context trên một số trình duyệt dù giá trị = 0 */ .eam-js .anim-blur-in:not(.anim-active) { filter: blur(var(--anim-blur, 10px)); } /* ========================================== Trạng thái HIỂN THỊ khi cuộn tới (JS gắn class .anim-active vào phần tử) ========================================== */ .eam-js .anim-item.anim-active { opacity: 1; /* transform: none thay vì translate3d(0,0,0) scale(1) rotate(0deg) translate3d(0,0,0) ≠ none: browser VẪN giữ compositing layer vĩnh viễn. 50 element đã animate = 50 GPU layers thừa → giật tích lũy khi scroll. none = xóa transform hoàn toàn → browser demote layer → giải phóng GPU memory. CSS tự interpolate translate3d(...) ↔ none (none = identity transform). */ transform: none; /* will-change: JS quản lý qua primeElement() / scheduleRelease() Không khai báo ở đây — default browser là 'auto', đã đủ. */ /* Thiết lập transition khi kích hoạt */ transition-property: opacity, transform; transition-duration: var(--anim-duration); transition-delay: var(--anim-delay); transition-timing-function: var(--anim-easing); } /* Chỉ thêm filter transition cho element thực sự dùng blur */ .eam-js .anim-blur-in.anim-active { filter: blur(0px); transition-property: opacity, transform, filter; } /* ========================================== Các hiệu ứng Hoạt ảnh (Animation Presets) Định nghĩa trạng thái ban đầu qua biến CSS ========================================== */ /* Fade chỉ hiện dần tại chỗ (không di chuyển) */ /* .anim-fade không cần khai báo thêm, mặc định là opacity 0 → 1 */ .anim-fade { /* inherit - Hiện dần tại chỗ */ } /* Fade + Di chuyển */ .anim-fade-up { --anim-translate-y: var(--anim-distance); } .anim-fade-down { --anim-translate-y: calc(var(--anim-distance) * -1); } .anim-fade-left { --anim-translate-x: var(--anim-distance); } .anim-fade-right { --anim-translate-x: calc(var(--anim-distance) * -1); } /* Slide (Di chuyển xa hơn Fade) */ .anim-slide-up { --anim-translate-y: 60px; } .anim-slide-down { --anim-translate-y: -60px; } .anim-slide-left { --anim-translate-x: 60px; } .anim-slide-right { --anim-translate-x: -60px; } /* Zoom */ .anim-zoom-in { --anim-scale: 0.85; } .anim-zoom-out { --anim-scale: 1.15; } /* Rotate & Scale */ /* backface-visibility chỉ áp dụng cho rotate (có 3D transform thực sự) */ .anim-rotate-l { --anim-rotate: -12deg; --anim-scale: 0.95; backface-visibility: hidden; } .anim-rotate-r { --anim-rotate: 12deg; --anim-scale: 0.95; backface-visibility: hidden; } .anim-scale { --anim-scale: 0.9; } /* Blur In */ .anim-blur-in { --anim-blur: 10px; --anim-translate-y: 10px; } /* ========================================== Clip-path Reveals ========================================== */ .anim-reveal { overflow: clip; } .eam-js .anim-item.anim-reveal:not(.anim-active) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); /* will-change được JS set đúng lúc (just-in-time), không khai báo ở đây */ } .eam-js .anim-item.anim-reveal.anim-active { clip-path: inset(0 0 0 0); /* XÓA filter khỏi transition-property: reveal không dùng filter Bầu filter vào transition là thừa, gây compositor pass không cần thiết */ transition-property: opacity, transform, clip-path; transition-duration: var(--anim-duration); transition-delay: var(--anim-delay); transition-timing-function: var(--anim-easing); } .anim-text-reveal { overflow: clip; } .eam-js .anim-item.anim-text-reveal:not(.anim-active) { opacity: 1; transform: translate3d(0, 0.5em, 0); clip-path: inset(0 0 100% 0); /* will-change được JS set đúng lúc (just-in-time), không khai báo ở đây */ } .eam-js .anim-item.anim-text-reveal.anim-active { clip-path: inset(0 0 0 0); /* XÓA filter: text-reveal không dùng filter — xem lý do trên */ transition-property: opacity, transform, clip-path; transition-duration: var(--anim-duration); transition-delay: var(--anim-delay); transition-timing-function: var(--anim-easing); } /* ========================================== Tiện ích Tốc độ (Duration Utilities) ========================================== */ .duration-100 { --anim-duration: 100ms; } .duration-200 { --anim-duration: 200ms; } .duration-300 { --anim-duration: 300ms; } .duration-400 { --anim-duration: 400ms; } .duration-500 { --anim-duration: 500ms; } .duration-600 { --anim-duration: 600ms; } .duration-700 { --anim-duration: 700ms; } .duration-800 { --anim-duration: 800ms; } .duration-900 { --anim-duration: 900ms; } .duration-1000 { --anim-duration: 1000ms; } .duration-1200 { --anim-duration: 1200ms; } .duration-1500 { --anim-duration: 1500ms; } .duration-2000 { --anim-duration: 2000ms; } .duration-3000 { --anim-duration: 3000ms; } /* ========================================== Tiện ích Độ trễ (Delay Utilities) ========================================== */ .delay-100 { --anim-delay: 100ms; } .delay-200 { --anim-delay: 200ms; } .delay-300 { --anim-delay: 300ms; } .delay-400 { --anim-delay: 400ms; } .delay-500 { --anim-delay: 500ms; } .delay-600 { --anim-delay: 600ms; } .delay-700 { --anim-delay: 700ms; } .delay-800 { --anim-delay: 800ms; } .delay-900 { --anim-delay: 900ms; } .delay-1000 { --anim-delay: 1000ms; } .delay-1200 { --anim-delay: 1200ms; } .delay-1500 { --anim-delay: 1500ms; } .delay-2000 { --anim-delay: 2000ms; } /* ========================================== Tiện ích Easing (Timing Functions) ========================================== */ .ease-default { --anim-easing: cubic-bezier(.22, .61, .36, 1); } .ease-in { --anim-easing: cubic-bezier(.55, .055, .675, .19); } .ease-out { --anim-easing: cubic-bezier(.215, .61, .355, 1); } .ease-in-out { --anim-easing: cubic-bezier(.645, .045, .355, 1); } .ease-linear { --anim-easing: linear; } /* ========================================== Hiệu ứng chữ Split Text ========================================== */ .eam-split-segment { display: inline-block; white-space: pre-wrap; } /* split-text: will-change được JS của parent element quản lý, các segment con KHÔNG cần will-change riêng — tránh tạo layer riêng cho mỗi từ/ký tự */ .eam-split-ready:not(.anim-active) .eam-split-segment { /* will-change: JS quản lý qua parent */ } .eam-js .anim-active.eam-split-ready .eam-split-segment { transition-property: opacity, transform; /* KHÔNG thêm filter vào transition: split-text chỉ dùng opacity + transform */ transition-duration: var(--anim-duration); transition-delay: calc(var(--anim-delay) + var(--eam-segment-delay, 0ms)); transition-timing-function: var(--anim-easing); } .eam-js .anim-split-words.eam-split-ready:not(.anim-active) .eam-split-segment { opacity: 0; transform: translate3d(0, 0.6em, 0); } .eam-js .anim-split-chars.eam-split-ready:not(.anim-active) .eam-split-segment { opacity: 0; transform: translate3d(0, 0.8em, 0) rotate(2deg); } /* ========================================== Tắt hiệu ứng theo thiết bị (Responsive Disable) Sử dụng: thêm class vào element để tắt animation trên breakpoint tương ứng - anim-no-mobile: tắt trên < 768px - anim-no-tablet: tắt trên 768px – 1023px - anim-no-desktop: tắt trên ≥ 1024px ========================================== */ @media (max-width: 767px) { .eam-js .anim-item.anim-no-mobile, .eam-js .anim-item.anim-no-mobile:not(.anim-active) { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: inset(0 0 0 0) !important; transition: none !important; } .eam-js .anim-no-mobile.eam-split-ready .eam-split-segment, .eam-js .anim-no-mobile.eam-split-ready:not(.anim-active) .eam-split-segment { opacity: 1 !important; transform: none !important; transition: none !important; } } @media (min-width: 768px) and (max-width: 1023px) { .eam-js .anim-item.anim-no-tablet, .eam-js .anim-item.anim-no-tablet:not(.anim-active) { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: inset(0 0 0 0) !important; transition: none !important; } .eam-js .anim-no-tablet.eam-split-ready .eam-split-segment, .eam-js .anim-no-tablet.eam-split-ready:not(.anim-active) .eam-split-segment { opacity: 1 !important; transform: none !important; transition: none !important; } } @media (min-width: 1024px) { .eam-js .anim-item.anim-no-desktop, .eam-js .anim-item.anim-no-desktop:not(.anim-active) { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: inset(0 0 0 0) !important; transition: none !important; } .eam-js .anim-no-desktop.eam-split-ready .eam-split-segment, .eam-js .anim-no-desktop.eam-split-ready:not(.anim-active) .eam-split-segment { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================== Hỗ trợ Tiếp cận (Accessibility / Reduced motion) ========================================== */ @media (prefers-reduced-motion: reduce) { .eam-js .anim-item, .eam-js .anim-item:not(.anim-active) { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: inset(0 0 0 0) !important; transition: none !important; } .eam-split-ready .eam-split-segment { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } }