Nelle parole della skill
Uno skill di costruzione, non di verifica: trasforma una richiesta di animazione in un'implementazione in grado di superare una revisione rigorosa, seguendo una sequenza fissa — se animare o no, finalità, strumento, proprietà, curva e durata, interruzione, uscita — per poi scrivere il codice.
È pensato per designer e sviluppatori che vogliono una decisione presa, non un menu di opzioni. I dettagli provengono da tabelle rigorose: livelli di frequenza, solo transform e opacity, curve cubic-bezier con nome, intervalli di durata per elemento, e gating per reduced-motion e hover forniti insieme all'animazione. Per verificare una codebase o valutare un diff, utilizzi le skill correlate.
Come funziona
- 01Filtrare prima in base alla frequenza
Il primo passo può concludere il lavoro prima ancora che esista del codice: qualsiasi elemento aperto oltre 100 volte al giorno, o attivato da una scorciatoia da tastiera, non ha alcuna animazione.
- 02Definisci lo Scopo in una Parola
Nessuno scopo, nessuna animazione. Richiederla perché sembra bella, su un elemento che l'utente vede di continuo, è un motivo per fermarsi invece che per procedere.
- 03Prendete lo strumento più economico che funziona
Scorra la tabella degli strumenti e fermatevi alla prima corrispondenza adatta: CSS transition, @starting-style, CSS animation, WAAPI, Motion.
- 04Limita le proprietà
Transform e opacity fanno il lavoro perché evitano layout e paint e vengono eseguiti sulla GPU; clip-path è la quarta proprietà autorizzata, e animare height è tollerato solo per gli accordion.
- 05Correggi curva e durata dalle tabelle
L'ingresso e l'uscita usano ease-out, i movimenti a schermo ease-in-out, i cambi di hover e colore ease, il movimento costante linear, il valore predefinito è ease-out.
- 06Pianificazione dell'interruzione e dell'uscita
Gli elementi rapidamente riattivati usano transizioni, i gesti usano molle, e l'uscita rispecchia l'ingresso in modo che lo swipe-to-dismiss risulti ovvio.