# Résultats de performance et d'utilisation
En juillet 2019, nous avons fait réalisé un projet afin de comparer les différentes technologies d'animation et d'intéractivité et de trouver celui qui convenait le plus à nos besoin en terme de performance, fonctionnalités et facilité d'utilisation. Nommé Rocket Leap, ce dernier consiste en un monopage designé par Minimal (opens new window). Nous avons intégré trois versions de ce site pour ainsi comparer les librairies choisies.
# Staging des versions
Le Style Guide est dans /styleguide sur toutes les versions, exemple https://a-rocketleap.staging.2associes.com/styleguide (opens new window)
- Version A - https://a-rocketleap.staging.2associes.com/ (opens new window)
- Version B - https://b-rocketleap.staging.2associes.com/ (opens new window)
- Version C - https://c-rocketleap.staging.2associes.com/ (opens new window)
# Performance
# Récapitulatif sur les animations pour le web
- L'objectif ultime est d'atteindre 60 images seconde en tout temps - Performance
- Quelques métriques selon DoubleClick:
- En moyenne, un site prend 19 secondes (total) à charger sur une connexion 3G
- 53% des visites à partir de mobile sont abandonnées si la page prend plus de 3 secondes à charger
- Comprendre comment le navigateur s'y prend :
- Recalcul des styles (sélecteur CSS)
- Disposition (i.e. dimensions et position)
- Ébauche (anglais Paint, remplir les pixels - background, color, border, shadows, texte)
- Couches Composites (surtout transform + opacity)
- Toutes les étapes précédentes consomme du CPU
- Par contre, les couches composites peuvent utiliser le GPU (souvent sous utilisé). Le GPU compositing est encore considéré comme un gros Hack parce que le W3C n'a pas de spécifications officielle concernant le GPU compositing. Super article sur Smashing Magazine.
- FP, FCP et FMP - First Paint, First Contenful Paint, First Meaningful Paint
# Résultats
- Selon les critères de succès, le Stack gagnant (sans grande marge) serait Version A (GSAP, ScrollReveal, Relax, Kute). Performance du Stack Version A jouant autour de 2% à 10% supérieure aux autres.
- Toutes les librairies font un bon usage du GPU et le FP/FCP/FMP est très raisonnable en Fast 3G (Mobile).
- Version B utilise que 2 librairies mais ne surpasse pas version A qui en utilise 4. Donc le nombre de librairie, taille du JavaScript (ou Bundle), ne semble pas un enjeu de performance pour les animations.
- Nuxt produit un Bundle optimisé. Peut-être que ces librairies sont moins performantes dans un autre environnement lorsqu'elles sont importées individuellement, (Exemple dans un WordPress trad)?
- À résultats égaux, les librairies pourraient donc être jugées sur d'autres critères : Learning curve et documentation, la méthode d'import dans des environnements modernes JS, la popularité (la communauté), la taille VS le nombre de fonctionnalités etc.
# Utilisation
# Stacks préférés
Core : GSAP, ScrollReveal
Situationnel : Tornis, Rellax, styler (popmotion)
Core : Popmotion Pure
Situationnel : Tornis, ScrollMagic ou Rellax.
# Animation
Bien que GSAP semble l'option la plus complète, les autres librairies d'animation font le nécessaire, et ce gratuitement. GSAP pourrait être utilisé seulement pour les rares projets qui nécessitent des animations complexes avec le budget pour payer la licence annuelle. Entre Kute.js, Anime.js et Popmotion Pure, Popmotion semble celui avec le meilleur rapport entre l'accessibilité, les fonctionnalités et la documentation. Sa capacité à fonctionner avec d'autres librairies pourrait même équivaloir les fonctionnalités plus avancées de GSAP.
# Mécaniques de défilement
Tornis et ScrollMagic sont d'excellents outils pour lier des mécaniques au défilement dans l'application. Tornis serait parfait dans les situations où n'avons pas besoin des fonctionnalités de « trigger » ou de « progress » de ScrollMagic. Il pourrait être aussi utile en cas d'implémentation de mécaniques liées au curseur.
Si la seule mécanique liée au défilement dont nous avons besoin est le parallax, Rellax est une bonne option.
# Animation d'apparition
ScrollReveal simplifie l'implémentation des animations de reveal. Par contre, il est déjà simple d'implémenter des animations de reveal en vanilla JS ou avec des librairies comme Tornis et ScrollMagic. À cause de cela, sa licence devient difficilement justifiable. Puisque notre expérience avec Animate on scroll n'a pas été idéale, on pourrait fonctionner avec une alternative ou avec notre propre script.