Evită linear, cu excepția spinner-elor și a barelor de progres.
Lecția 3, Durata, al doilea ingredient secret
Tipul de animație
Durata
Micro-interacțiune (apăsare buton, toggle)
100 până la 200 ms
Tranziție UI (deschidere modal, glisare drawer)
200 până la 400 ms
Dezvăluire de pagină / animație hero
600 până la 1200 ms
Moment cinematic de scroll
timeline de 1.5 până la 4 s
Loop decorativ
atât timp cât nu se repetă vizibil
Cu 20% mai rapid pe mobil, degetele par mai lente dacă motion-ul e prea lung.
Dacă o tranziție e prea rapidă, utilizatorii o ratează. Prea lentă, așteaptă. Urmărește utilizatori reali ca să calibrezi.
Lecția 4, Greșelile de motion care strigă „amator”
Săltat peste tot, fiecare element săltând la intrare. Maximum unul per pagină.
Parallax care se mișcă haotic. Parallax subtil (factor de scroll 0.1 până la 0.3) e gust. Parallax mare amețește.
Blob-uri care urmăresc cursorul. Trend mort din 2024.
Galerii cu auto-scroll mai rapide decât utilizatorul. Enervant.
Emoji-uri animate pe site-uri profesionale.
Animații de logo în loop. O dată la încărcare. Gata.
Lecția 5, Tehnica „mai puțin înseamnă mai mult”
Pe fiecare proiect, după ce motion-ul e pus, fă o trecere brutală, taie 30% dintre animații. Site-ul pare mai sigur pe el, mai puțin anxios. Gustul de nivel senior spune „de unde putem scoate” mai des decât „unde putem adăuga”.
Lecția 6, Reduced motion nu e negociabil
Împachetează întotdeauna animațiile în @media (prefers-reduced-motion: no-preference).
Oferă fallback-uri statice pentru utilizatorii care au renunțat.
Nu e opțional în 2026, legile de accesibilitate din UE și SUA îl cer tot mai mult.
📜 Prompt Playbook, Auditează-ți animațiile pentru supra-design
Cel mai bun pentru. Verificare de bun-simț la mijlocul proiectului •Cel mai bun AI. Claude Opus 4.6
Mai jos e o listă cu fiecare animație de pe site-ul meu, cu o descriere de 1 rând. Pentru fiecare, spune-mi, 1) care dintre cele 4 roluri îl servește (status, continuitate, ierarhie, personalitate), 2) dacă nu servește niciunul, recomandă tăierea. Apoi spune-mi ce 30% să tai ca site-ul să pară mai sigur pe el. Listă, <lipește lista ta de animații>.
QUEST BRONZ+150 XP
🎬Catalogează motion-ul de pe 5 site-uri premiate
Obiectiv. Vezi cât de reținute sunt cele mai bune.
Pași
Alege 5 Awwwards SOTD din ultimele 30 de zile.
Notează fiecare animație de pe fiecare.
Etichetează fiecare ca status / continuitate / ierarhie / personalitate / decorație.
Notează-ți observațiile.
Gata când
☐ 5 site-uri catalogate
QUEST ARGINT+300 XP
✂️Taie 30% dintre animații de pe unul dintre site-urile tale vechi
Obiectiv. Simte disciplina.
Pași
Alege un site vechi cu multă animație.
Notează fiecare animație.
Taie 30%.
Arată situația înainte/după la 3 colegi.
Documentează schimbarea de percepție.
Gata când
☐ 30% tăiat
☐ Feedback de la colegi colectat
QUEST AUR+500 XP
🎥Lansează 1 site cu „reținere cinematică”
Obiectiv. Impact maxim, motion minim.
Pași
Construiește un proiect cu cel mult 5 animații în total.
Fiecare trebuie să servească unul dintre cele 4 roluri.