10 principles for smooth web animations – Gyroscope

Traduction rapide pour mémoire de ces 10 principes pour des animations fluides...

  1. Ne change jamais d'autres propriétés que opacity ou transform ! (même si ça a l'air chouette, ne le fais pas !)
  2. Cache les objets avec opacity:0 et pointer-events: none pour éviter les rendus inutiles
  3. N'anime pas tout en même temps (à la place fais des chorégraphies: déclenche une série d'animations par l'ajout d'une classe, chaque animation ayant son propre transition-delay).
  4. Augmente les transition-delay pour créer un effet de chorégraphie.
  5. Utilise un modificateur de délai global pour créer tes animations en slow motion puis accélérer ensuite
  6. Filme tes animations pour avoir une perspective à la troisième personne.
  7. L'activité réseau peut ralentir les animations: pense au preload or temporise les grosses requêtes HTTP
  8. N'attache pas d'animations au défilement de page et évite de créer tes propres scrollbars
  9. Teste sur mobile tôt et souvent.
  10. Teste sur des appareils différents.
Via Kalvn's links


❝ 2 commentaires ❞

1  jerry wham le

Un dernier a été oublié :
11. Si tu ne veux pas te faire chier, évite les animations

 
2  Bronco le


Mouhouhaha !

Je l'avais pas vue venir celle-là

 

Fil RSS des commentaires de cet article

✍ Écrire un commentaire

les commentaires relevant du SPAM seront filtrés et dégagés direct...

Quelle est le troisième caractère du mot lgtved ?