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


Fil RSS des articles de ce mot clé