Fundamenty Ruch
Fundamenty
Ruch
Animacja niesie sens, nie dekoruje. Spokojne wejścia, miękkie krzywe i jedna żelazna zasada: wejście to ease-out (szybko → wolno), wyjście to ease-in (wolno → szybko). Wszystko respektuje prefers-reduced-motion.
Krzywe easing
Cztery krzywe pokrywają cały serwis. Wykres pokazuje postęp animacji w czasie.
ease-out-soft
--ease-out-soft Wejścia i hover – szybko, potem wolno
ease-in-out-soft
--ease-in-out-soft Przejścia dwustronne
open (akordeon)
cubic-bezier(0.16, 1, 0.3, 1) Rozwijanie – mocny ease-out
close (akordeon)
cubic-bezier(0.7, 0, 0.84, 0) Zwijanie – ease-in
Demo hover
Najedź. Primary wypełnia się jasną miętą z góry na dół tą samą mechaniką clip-path co kafelki usług (najazd ease-out, zejście ease-in, 1 s). Linki dorysowują podkreślenie od lewej w 300 ms.
<!-- Nakładka ::before powiela etykietę i odsłania się clip-path z góry na dół -->
<a class="btn-sweep rounded-button border border-ink bg-ink px-6 py-2.5 text-mint" data-label="Najedź">Najedź</a>Akordeon – rozwijanie i zwijanie
Lista rozwijalna pokazuje parę krzywych z tabeli wyżej: rozwijanie to mocny ease-out (szybko → wolno), zwijanie to ease-in (wolno → szybko). Element zostaje otwarty do końca animacji zamykania.
Zasady ruchu
Czym różni się wejście od wyjścia?
Wejście jest na ease-out (szybko, potem wolno), a wyjście na ease-in (wolno, potem szybko). Rzeczy „wlatują” energicznie, a „znikają” z wyhamowaniem.
Dlaczego akordeon nie używa transition?
Natywny element details nie animuje wysokości, więc panel trzymamy otwarty do końca animacji i animujemy go przez Web Animations API.
Co z prefers-reduced-motion?
Przy włączonej redukcji ruchu wracamy do natywnego, natychmiastowego rozwijania – bez animacji wysokości.
Czasy trwania
Im większy/dłuższy ruch, tym wolniejsza animacja. Drobne interakcje są błyskawiczne, wejścia sekcji – dostojne.
| Czas | Zastosowanie |
|---|---|
| 300 ms | Hover, zmiany koloru, drobne przesunięcia |
| 450 / 500 ms | Zwijanie / rozwijanie akordeonu |
| 1000 ms | Najazd wiersza usługi (clip-path) |
| 1200 ms | Reveal-on-scroll (slide-up + fade) |
| 2500 ms | Licznik statystyk (cała animacja) |
Reveal-on-scroll
Elementy .reveal wchodzą slide-up (18 px) + fade przez 1,2 s, gdy wjadą w widok. W jednym rzędzie lewe pojawiają się przed prawymi (stagger wg pozycji poziomej). Kliknij, by odtworzyć.
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 1.2s var(--ease-out-soft), transform 1.2s var(--ease-out-soft);
}
.reveal.is-visible { opacity: 1; transform: none; }prefers-reduced-motion
Gdy użytkownik prosi o mniej ruchu, wyłączamy wejścia, animowane okładki i karuzele – treść pojawia się od razu, nic nie miga.
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
.cover-anim__layer { display: none; }
}