Światło przesuwające się po literach. Płynne przejście między rozdziałami. Model produktu, który możesz obejrzeć z każdej strony. Ruch potrafi zrobić ogromną różnicę — pod warunkiem, że jest częścią projektu, a nie dodatkiem doklejonym na końcu.
Od mikroruchu do sceny 3D
Możemy tworzyć reakcje przycisków, przejścia stron, animowaną typografię, sekwencje przewijania, parallax, interaktywne SVG i wizualizacje WebGL. CSS oraz Web Animations API wystarczają do wielu efektów. Bardziej złożone sekwencje mogą korzystać z GSAP, a sceny przestrzenne z Three.js i shaderów. Narzędzie wynika ze złożoności pomysłu.
Ruch musi mieć tempo
Nie każemy czekać na animację, żeby znaleźć numer telefonu. Wejścia powinny być zwięzłe, a przejścia pomagać zrozumieć zmianę widoku. Najciekawszy bywa jeden dobrze dopracowany moment: światło, odkrycie obrazu, zmiana perspektywy. Reszta interfejsu może być spokojna. Taki kontrast daje efekt, którego nie da się uzyskać, animując wszystko jednocześnie.
Płynność to część projektu
Sprawdzamy koszt renderowania i obciążenie urządzenia. Preferujemy animowanie transformacji oraz przezroczystości, ograniczamy ciężkie filtry i dostosowujemy rozdzielczość sceny do możliwości sprzętu. Dla osób wybierających ograniczony ruch przygotowujemy spokojniejszy wariant przez prefers-reduced-motion. Przy niedostępnym WebGL można zachować statyczny obraz lub prostszą wersję efektu.
Nie każda branża potrzebuje portalu ze światła
Czasem spektakularne hero jest idealne. Czasem wygra dobrze działający filtr, subtelna galeria albo natychmiastowa informacja po wysłaniu formularza. Ustalamy, gdzie efekt ma budować emocję, a gdzie interfejs powinien po prostu działać. To różnica między demonstracją technologii a dobrą stroną firmy.
Dokumentacja do dalszej lektury:
MDN — prefers-reduced-motion ↗