10 principles for smooth web animations – Gyroscope
Traduction rapide pour mémoire de ces 10 principes pour des animations fluides...
- Ne change jamais d'autres propriétés que opacity ou transform ! (même si ça a l'air chouette, ne le fais pas !)
- Cache les objets avec opacity:0 et pointer-events: none pour éviter les rendus inutiles
- 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).
- Augmente les transition-delay pour créer un effet de chorégraphie.
- Utilise un modificateur de délai global pour créer tes animations en slow motion puis accélérer ensuite
- Filme tes animations pour avoir une perspective à la troisième personne.
- L'activité réseau peut ralentir les animations: pense au preload or temporise les grosses requêtes HTTP
- N'attache pas d'animations au défilement de page et évite de créer tes propres scrollbars
- Teste sur mobile tôt et souvent.
- Teste sur des appareils différents.
Via Kalvn's links
❝ 2 commentaires ❞
Fil RSS des commentaires de cet article
✍ Écrire un commentaire
les commentaires relevant du SPAM seront filtrés et dégagés direct...