Bonjour et bienvenue dans ce nouvel épisode. On va continuer là toute la série qu'on a
mis en place durant l'été où on a parlé de l'OTI, on a parlé de 3JS et on continue dans
cette lancée où on va parler de CSS et de JS et aujourd'hui on va parler de CSS et comme
toujours avec Patrick. Salut Patrick. Salut à tous, salut Alex. Alors le CSS ça fait super longtemps
qu'on peut faire des animations en CSS, ça date pas d'aujourd'hui néanmoins il y a quand même
des concepts qu'il faut bien comprendre pour éviter de faire n'importe quoi. Déjà,
par quoi on va commencer et quelles seraient les bonnes pratiques pour éviter de faire n'importe
quoi et de ruiner des animations. Déjà avant d'intégrer des animations via JavaScript,
il faut déjà commencer par des animations avec CSS. On peut faire beaucoup de choses,
on peut animer des éléments tout ça et notamment rien qu'en changeant une classe avec
JavaScript tout ça avec un simple boot code tu peux animer des éléments tout ça. Donc avant,
le conseil c'est avant d'utiliser JavaScript pour faire des animations, essayons de les faire avec
CSS au maximum que qu'on puisse faire et puis après si vraiment c'est... En fait on pourrait
dire que c'est l'animation la plus bas niveau qu'on puisse faire et plus longtemps on reste sur un
usage bas niveau meilleur c en fait. Est-ce qu'on pourrait partir là dessus ou pas ?
Bah ouais en termes de perf, on va le voir un peu plus tard mais c'est vraiment mieux avec CSS
qu'avec JavaScript, je vous expliquerai beaucoup après mais dans l'ensemble ouais. Enfin moi
je suis un fan des animations CSS avant JavaScript. Donc tu vas nous parler de
transition, de animation, des choses comme ça ? Ouais on va partir du basic comme ça on va prendre
les trucs les uns après les autres et puis comme ça on va avancer jusqu'à la performance pour
comprendre un petit peu comment ça fonctionne niveau du navigateur. En fait ça... Alors tout
commence alors au niveau des éléments on peut changer l'état d'un élément avec les propriétés
CSS donc tu peux changer tout ce que tu veux la couleur, la taille etc. Par exemple toutes les
propriétés peuvent être animées ? Bah quasiment je ne vois pas une propriété qui peut pas être
animée donc un changement d'état entre deux... Par exemple un bouton quand tu es over tu vas
changer la taille la hauteur, la largeur et la couleur et là il se passe rien puisque quand
tu passes sur ton bouton ça change mais il n'y a pas d'effet d'animation c'est juste un changement
et en fait le changement le début des animations il commence on appelle transition animation
parce qu'on n'est pas encore vraiment sur d'animation mais on a déjà quelque chose qui se passe c'est
dès que tu rajoutes le mot la propriété transition. Donc c'est passé d'un état...
normal à un état over là je vais appliquer une transition donc c'est la transition d'un
état à un autre là je vais pouvoir appliquer... Tu vas définir quelle
propriété par exemple soit all donc ça va tout prendre c'est le méthode boutin soit tu vas dire
que la largeur que la couleur le background color ou des trucs comme ça et tu lui mets une
duration une durée en fait et c'est là où tu vas commencer à avoir un petit effet il y aura
une transition entre les deux et là les animations commencent parce que tu as un changement de
propriété de taille etc l'élément bouge en fait c'est vraiment le début c'est le basique c'est le
truc qu'on fait souvent avec les boutons tout ça quand on passe dessus. Ok donc je veux passer
d'un bouton bleu à un bouton rouge et je vais lui mettre dans je vais faire ma transition la
propriété ça va être sur mon background color et sur ma durée je vais dire une seconde par exemple
ce qui est très lent mais c'est vraiment l'effet quoi. Ok et par contre la propriété transition
je vais la mettre sur quelle classe en clair sur le parent ou sur l'état souhaité en clair sur le
départ ou sur la fin. Généralement ça se met sur le comment dire comment c'est le parent en fait
l'état de base en fait. Donc ça va se répandir si tu as un changement ce sera il y aura une transition.
Ok donc je vais mettre bouton après je vais avoir une autre classe bouton over et là je vais définir
ma transition sur le bouton non pas sur le bouton over ce qui veut dire que toutes les animations
de ce bouton que ça soit sur le focus sur le over ou n'importe quoi la transition s'appliquera
avec les règles que j'ai marquées. Ouais c'est ça. Et donc ça marche. Donc ça on peut faire ça
avec des over des pseudo classes en fait au niveau du CSS mais aussi on peut le faire avec
JS donc là avec très peu de lignes de code en général il suffit de rajouter une classe de l'enlever
etc tu peux faire des mouvements en fait des transitions sur des éléments facilement en
ajoutant sur une classe. Il y a aussi une API qui est super pratique c'est l'intersection observer
qui permet de déterminer quand un élément arrive visible dans la fenêtre. Dans le viewport
donc ça c'est natif au niveau des brosers c'est quasiment supporté par tous les brosers
maintenant et ça c'est hyper pratique quand un élément qui s'affiche en fait de préparer
une transition qui bouge ou il change de forme ce que tu veux donc c'est vraiment très très simple
et il demande très peu de JS pour faire des animations CSS vraiment efficaces en fait la
plupart du temps donc voilà il faut vraiment ne pas hésiter à utiliser ça en premier en priorité
avant JS avant les hybréries JS tout ça même si il y a des très bonnes hybréries je dis pas
le contraire et qu'on ne peut pas aller aussi loin que certaines hybréries avec du cesse clairement
ok et donc on commence par faire par mettre des transitions et après si on veut faire des animations
un petit peu plus complexes si on veut faire des transformations il y a une propriété qui s'appelle
transforme c'est ça ouais il y a une propriété qui s'appelle transforme en fait alors j'y reviendrai
un petit peu après mais dans l'idéal en fait c'est la propriété qu'il faut utiliser en priorité
en fait c'est un trans c'est la propriété qui permet de transformer un élément et qu'il faut
utiliser en priorité donc il y a une vingtaine de propriétés de transformation tu peux augmenter
enfin tourner enfin il y a plein de faire pivoter etc il y a plein de transformation qui sont vraiment
idéales pour si tu veux faire déplacer un élément un élément tu fais translate et tu donnes
les informations et ton élément il va se déplacer sans avoir besoin de faire un top
ou position absolue tout d'un chien tu vas sans utiliser ça rien qu'à être translate t'arrives
ok et avec ta ta propriété transforme pour le coup tu vas le mettre sur ta pseudo classe donc le bouton
over et là tu vas mettre ta propriété transforme ou c'est toujours sur le parent non c'est sur la
propriété ou il y a l'événement en fait d'accord donc sur le bouton de point over donc dans ma
pseudo classe enfin dans ma classe avec l'action over c'est là où je vais mettre ma transforme donc
ça va lancer la transition d'un état à un autre et là je vais quand j'arrive dans la dans le
over je vais appliquer cette transformation qui va être un scale une trans l'aide une
rotate une squel une perspective ou tout ça quoi d'accord ouais ouais et tu peux quand même mettre
par au parent enfin l'élément de base par exemple translate 0 pour dire il part de 0 et tu vas
te déplacer à telle distance ok préparer la transformation ça marche ouais et c'est ça
qui correspond à transform origine ou rien à voir ouais transform origine c'est pour définir
en fait à quel point en fait c'est le point d'ancrage de la transformation si tu fais une
rotation en fait soit tu es au centre soit tu es sur le côté et donc c'est à partir de là tu vas
faire des des animations sur un élément qui va tourner d'une façon différente c'est là où tu
commence là c'est le début de l'animation tu vois c'est un élément peut avoir une animation
différente rien qu'en changeant le point d'ancrage de la transformation ça commence à être un peu
touché tout ça ok et est-ce qu'on n'arrive pas vite à une certaine limite avec uniquement ces
propriétés transforme bah là en fait c'est là ce qu'on depuis le début ce qu'on dit en fait c'est
vraiment des transitions on n'est pas vraiment sur l'animation parce que l'animation c'est vraiment
des mouvements qui sont en boucle avec des éléments qui tournent dans tous les sens
là on est vraiment sur la transition donc c'est vraiment de l'animation de base
voilà c'est de passer d'un état à un autre voilà c'est juste rendre agréable la navigation
par un internaute c'est vraiment de voilà changer un background color des choses comme ça
près les vraies animations on peut en faire mais là il faut partir sur un sur une autre
propriété qui s'appelle animation donc à partir de là là on part en part dans le vraiment
l'animation css où on peut contrôler un peu plus finement les mouvements des éléments ok et donc
on a une on a même des animations des propriétés d'animation où là pour le coup on va on va
retrouver un peu les mêmes le name la duration le délai la direction les fils tout ça ouais
et donc et c'est là où on en vient donc le name correspond à quoi quand tu fais animation
de point name le name correspond à un keyframe en fait et c'est là où on en arrive aux animations
avec les keyframes c'est le keyframe permet de définir en fait une sorte de timeline avec
les transformations de ton élément et c'est là où l'animation commence ok et souvent on voit
0 25 50 75 100 % donc ça va prendre en compte ton animation totale et à 0 % donc au départ de
l'animation je vais définir toutes les propriétés que tu veux et à 100 % tu vas mettre toutes les
propriétés que tu veux c'est ça c'est d'où tu vas pouvoir animer ok et tu vas pouvoir animer à
chaque point de passage ok c'est vraiment une timeline en fait des transformations fin des
propriétés et tu peux y aller de soit tu vas de from à tout donc d'où tu pars et où tu vas
soit tu peux vraiment y aller par pourcentage de ton animation et faire un truc qui perd poussé
avec des mouvements très poussé ce qui frame tu lui donne une un nom et c'est là où tu vas
l'utiliser dans l'animation et après dans avec la propriété animation tu lui donne donc le nom du
qui frame et ensuite la durée de délai c'est là où tu vas vraiment contrôler ton animation
ok donc tu rentres à toutes les informations dans tes qui frame et tu viens instantier cette
animation c'est comme si tu avais une sorte de fonction en fait voilà c'est une sorte de fonction
tu viens de définir toutes tes propriétés ouais tu peux utiliser en plus tu peux l'utiliser dans
un boucle parce que tu peux faire une animation qui tourne un boucle donc un élément qui par
exemple qui va tourner et qui ne s'arrêtera jamais enfin voilà et là tu peux vraiment pousser les
animations à fond ok et c'est ces iterations comptes tu peux le lancer deux fois trois fois
quatre iterations ou infinites quoi ça ouais c'est pas mal et t'as les directions ça
veut dire tu peux le faire tu peux la lancer à l'envers à l'endroit tu peux tu peux jouer
ouais ouais c'est voilà tu peux vraiment jouer dans pas mal de l'élément de propriété alors
c'est là il ya soit tu prends propriété par propriété donc animation duration animation
timing function animation délai mais après la propriété animation de point tu peux sens un
shortcode qui permet de tout enchaîner sur une seule ligne en fait ok c'est un raccourci
quoi au lieu de ouais c'est exactement pareil que padding top padding voilà c'est ça padding
left padding machin tu peux faire un padding et ta première c'est ton top la deuxième c'est ton
right la deuxième donc c'est ouais c'est un raccourci ok voilà et par expérience toi tu préfères
mettre tout sur une ligne ou d'avoir une ligne on va dire d'être plus exo plus exostif il y a
des bonnes pratiques ou c'est un peu je sais pas dans les pouvoirs de chacun bah c'est toujours
la même chose c'est comme tu préfères j'ai envie de dire mais souvent l'animation tu au-delà du nom
et de la durée tu fin rarement tu vas au fond à la limite infinie mais c'est rare que t'as eu beaucoup
plus loin donc à moins que tu aies vraiment une animation poussée donc soit soit les propriétés
une par une une ou deux souvent tu n'utilises ou soit tu prends le short code c'est au préférence
quoi et est ce que tu vas être limité sur tes keyframe à toutes les propriétés par exemple
dans notre dans notre animation dans enfin dans notre keyframe on va mettre à 0% on va lui
définir bah la valeur top elle va être à 0 bas grain on est le bête à rouge et est ce que on a
limité par le nombre de propriétés qu'on va injecter à 0% à 25 ou pour le coup on peut en mettre
autant qu'on veut tu es pas limité après après ça va être ça ça va être super dur à lire quoi
bah déjà dur à lire et puis dur à lire pour le browser si là si là si pour chaque keyframe il a
200 transformations à faire ça va devenir compliqué pour lui et donc ça va tirer un petit
peu sur les performances donc on en parlera après des performances mais faut toujours être modéré
dans les transformations ok et sur sur les keyframe est ce que c'est plus facile de définir
plusieurs keyframes c'est à dire ok je vais prendre mon élément je vais le bouger donc je vais
je vais je vais appliquer une translation donc la keyframe a pour objectif de faire que du déplacement
et je vais créer une autre keyframe qui va gérer la couleur donc en clair je viens séparer
les animations ouais en fait une animation qui s'occupe du déplacement et une autre animation qui
s'occupe du changement de couleur ou c'est préférable de mixer les deux écoute j'ai jamais
fait de définir de définir je me suis en train de supposent col je sais pas si on peut définir
plusieurs animations en fait je n'ai jamais essayé ouais ouais en fait c'est moi je dirais que c'est
plus propre de définir plusieurs keyframes parce qu'en fait on pourrait tenter de faire ok je prends
cet élément là et je vais animer cet élément là et je vais mettre toutes les propriétés de
l'élément de l'animation de cet élément dans une seule keyframe mais le problème c'est que si tu
veux réutiliser ton changement de couleur ailleurs bah tu peux pas et donc pour moi t'as meilleur
temps de séparer les keyframes et tu peux tu peux appeler plusieurs animations sur et en fait
bah c'est un peu du bonnes pratiques de code en règle générale c'est ta fonction elle fait
qu'une seule chose elle s'occupe du que d'une seule chose quoi donc tu vas faire une keyframe pour le
déplacement et une keyframe pour pour la couleur ouais ta raison c'est le permet de réutiliser
d'éclairement de code c'est clair et puis et puis surtout de bien séparer les responsabilités quoi
il y en a une qui est en charge de changer la couleur et l'autre qui est en charge de parce que si tu
viens jouer et de mixer les deux bah ça en termes d'entretien et en termes d'évolution bah c'est
peut-être un peu plus compliqué par contre ça peut vite être quand même super compliqué tout
ces keyframes t'intérêt à être hyper clair dans ta tête ou enfin dans ta tête ou au moins dans ton
navigateur de savoir qu'est ce que tu fais et comment tu tu tu les tu articules toutes ces propriétés
là parce que ça peut vite être méga complexe carrément après c'est toujours pas c'est toujours
la façon de décrire le code d'être propre de faire de bien appeler les animations tout ça pour
savoir ce que ça fait exactement tout ça toujours la même chose ouais toujours la même chose les
fondamentaux reste les mêmes sur les animations on peut faire tout est n'importe quoi après il y en a
et il y a une nouvelle faillite des propriétés qui sont assez récentes en fait et qui sont la bonne
nouvelle c'est que on en a déjà parlé sur sur l'épisode je sais plus sur les ah ouais les web
plateformes 2022 où on parlait justement de safari l'évolution tout ça il ya les motion pass qui
sont qui arrivent en fait qui existent depuis quelques temps mais qui n'étaient pas encore pris en
charge par tout une navigateur et safari avait annoncé justement qu'il prenait ça en charge
sur la future version de safari et donc c'est des c'est une propriété qui permet de rajouter
en fait c'est ta trois ta trois propriétés offset pass d'office distance et offset rotate et qui
permet en fait de à ton élément de suivre un tracé un pass par exemple ou tu peux mettre un
cercle ou n'importe donc c'est c'est les passes comme sur le svg en fait et donc tu lui dis de suivre
le tracé que tu auras dessiné en svg en fait c'est vraiment du ok vectoriel
ok à partir de l'art tu t'as écrit toutes tes coordonnées en fait sur ton pass et l'élément suit
cette voilà je suis précisément ce chemin donc là c'est vraiment intéressant parce que tu peux
définir un tracé vraiment précis pour un élément et après tu peux justement c'est là où dans
le chemin tu lui dis donc tu lui dis donc par exemple ça serait à 40 % de l'animation
tu auras déjà parcouru 70 % de la distance du du chemin que je t'ai annoncé dans mon pass
et là tu peux vraiment faire une animation avec des mouvements assez poussés
sur des éléments donc là c'est vraiment intéressant et le dernier voilà qui manquait c'était sa farie
donc là le prochain le prend en charge donc là on va pouvoir commencer à vraiment utiliser motion pass
pour pousser les animations encore plus quoi et faire un mouvement vraiment définie via des passes ou
des enfin c'est vraiment des trucs géométriques classiques qu'on utilise en svg quoi
donc ça c'est pas... alors par contre moi j'ai jamais utilisé ça et là le premier
la première en fait blocage ou la première barrière que j'aurais en fait c'est comment je
fais pour écrire mon pass de manière fluide tu vois parce que un pass sous svg là les m10 10h
180 v alors peut-être que je me suis jamais plongé là dessus et donc clairement je ne sais pas
mais ça serait intéressant il y a peut-être des outils qui nous permettent de traduire ce pass
de manière on va dire un peu plus intelligible et comme ça on a juste à copier le pass le
chemin qu'on veut faire et puis basta quoi mais c'est ça me paraît super puissant et par contre
t'as intérêt d'avoir un bon niveau en passe enfin en traitement du svg tu peux... tu sais quand tu
t'entends code svg tu as le pass en fait normalement tu as un attribut où tu as justement toutes ces
lettres là qui permettent de définir le tracé je pense qu'il suffit de prendre ce qu'il y a dans
les dans l'attribut en fait et de le coller là ça devrait fonctionner à tester mais c'est vrai qu'après
il faudrait peut-être des outils qui permettent de le faire et peut-être ça va être intégré dans
le depth tool sont trucs comme ça des choses qui permettent de faire un tracé ou...
Ouais ou alors de traduire ce qu'il faudrait voir aussi c'est j'écris un svg sous figma xd ou on va
dire un logiciel de design et est-ce que je peux exporter que ce passe et si je le colle là dedans
ça marche direct ça serait... j'en sais rien du tout mais ça me paraît... ça serait super bien
parce que j'écris mon chemin on va dire classique et derrière et derrière je peux l'animer
facilement quoi donc ça serait intéressant intéressant c'est ça c'était pas encore très très
bien supporté tu disais mais maintenant... il manque ça paris en fait en fait il y a peut-être
les dernières versions de browser sauf sa farie et donc la future version la 16 si je dis pas de
le supportera donc
ok voilà super donc c'est bon quoi maintenant il n'y a plus de frein à part notre expertise
en traitement du passe svg mais ok top top donc seconde partie donc là on a vu un peu tous les
basiques tout ça voilà les propriétés qui sont plutôt simples à utiliser la plupart du temps
il y a pas mal de tutos sur internet tout ça pour apprendre on a on a il y aura pas mal de liens
dans les notes de l'émission sur ça sauf que maintenant on va passer un peu sur la performance
en fait au niveau des animations parce que forcément ben quand on anime un élément ça va
mais quand on anime plusieurs c'est là où ben le navigateur ça lui fait du travail et
bah il commence à avoir des petits problèmes pour rendre les animations et c'est là où il faut
parler un petit peu de tout ce qui est fps et comment on anime correctement des éléments sur
sur une page ok fps c'est frame par seconde ouais ok donc en fait simplement pour expliquer le fps
en fait les écrans en fait il y a un rafraîchissement de l'écran 60 fois par seconde en moyenne en fait
tous les écrans ça peut près ça quoi après il y en a qui le font un peu plus pour des gaming ou
des choses comme ça mais la plupart des écran 60 fois par seconde ouais donc en fait dans l'idéal
il faut que les animations fassent au minimum 60 fps voilà pour être fluide en fait au niveau
de toujours donc ça on peut le vérifier dans le devtools de chrome ou des devtools du browser
en fait où il te donne les fps en temps et ça on en parlera après mais il y a des façons de vérifier
ça et en fait dans l'idéal en fait c'est qu'il faut que ton animation va faire le chaque frame
il ne soit pas trop gourmand en ressources pour être assez rapide et donc faire une animation
qui fasse 60 fps donc en fait on a un budget de 16 millisecondes en fait pareil
ok c'est calculé parce que 16 60 enfin une seconde divisé par 60 ça fait 16,66 millisecondes
et donc même si normalement c'est un petit peu moins parce qu'apparemment le navigateur a besoin
de faire de plus de travail de nettoyage tout ça donc il donne plutôt 10 millisecondes donc il faut
respecter en fait ce budget entre 16 millisecondes par frame pour avoir une animation qui est fluide
sinon après si on ne fait pas ça correctement il y a un moment l'animation on va avoir des petits
ça va s'accader en fait tu vois ton animation on va pas fluide ça va faire tac tac tac tu vas
commencer à voir les films en fait et ça s'appelle la c'est moche là c'est moche ça fait chauffer
l'ordinateur ou le mobile parce que c'est beaucoup sur mobile aussi et là c'est négatif pour l'utilisateur
et puis la animation est pourrie voilà tout simplement ok et on revient sur la
discussion qu'on avait déjà eu avec Bruno Simon qui nous avait parlé de 3js justement où lui il
passe son temps à aller optimiser ça pour justement avoir des animations et un rendu hyperfluide
parce que la perte ça fait partie intégrante de l'animation et c'est vrai que si on passe du
temps à faire un truc hyper propre hyper joli mais sur le rendu de la machine c'est tout s'accader
en fait c'est contre productif quoi parce que au lieu d'avoir un effet sympa joli on a un effet
ouai putain ça lague c'est dégueulasse quoi oui oui et puis l'ordinateur commence à ventiler
et puis ou le téléphone commence à chauffer dans ta main enfin voilà c'est un peu agréable
puis les gens se barrent en fait parce que voilà ça marche pas quoi donc c'est dommage de faire des
animations qui ne marche pas donc en fait c'est il y a des bonnes pratiques à respecter je suppose
il y a des bonnes pratiques mais surtout avant avant toute chose en fait alors on va parler de css
principalement pour l'instant il faut comprendre en fait comment le navigateur il rend en fait comment
il transforme comment il rend un élément en pixel au niveau de l'écran en fait faut vraiment comprendre
ça parce que c'est ce qui va permettre de comprendre comment une animation qu'est ce qu'il
faut utiliser pour les animations pour optimiser une animation donc en gros on appelle ça un piping
en fait c'est un tunnel voilà pour c'est le pixel to screen pipeline donc c'est comment le navigateur
rend une page en fait web en pixel donc ça commence toujours par les avascript ça c'est vraiment
le départ donc c'est pour ça que je disais quand tu fais des animations javascript si tu
commence à ajouter des éléments dans le dom tout ça forcément ça va repartir au début du
pipe donc ça marche vraiment comme un tunnel dès que tu vas déclencher un un un step en fait ça va
déclencher la suite en fait à chaque fois donc plus tu vas déclencher de l'état et plus ça va
demander des performances puisque à chaque fois le broseur de calculer tout ça donc la script c'est
là le navigateur il va le dire le css et il va déterminer les règles basés sur les sélecteurs
pour pouvoir appliquer sur chaque élément donc il va il lille css il voit ok là le point bouton c'est
ça il sait chaque élément ok lui c'est ça ensuite à la disposition donc c'est le layout donc là
c'est là où il va déterminer sur l'écran la taille de chaque élément en fait et donc chaque élément
bah influe sur les autres tu vois si tu as des marches tu as des tailles tout ça donc ça en fait
c'est une sorte de tétrisse quoi chaque élément c'est un brick et donc il faut calculer les uns
après les autres et voir ce qui est fait ça un élément va déterminer la position de l'autre
élément suivant etc ça c'est vraiment la disposition niveau de la page ensuite il y a le paint donc
ça c'est la peinture donc ça c'est là où les éléments deviennent des pixels donc ça ça concerne
tout ce qui est les couleurs les chadeaux etc c'est là où il va mettre les couleurs mettre les
couleurs tout ça et à la fin il y a la composition donc ça c'est l'assemblage en fait qui fait des
layers en fait un peu pour le tu sais comme les énex tout ça tu as des layers des éléments qui
passent au dessus des autres ça machin donc là on a vraiment en gros si tu enlèves le chaveascript on
a quatre steps dans ce pipeline donc c'est vraiment ce donc peut-être que tu vas déclencher un
petit tu déclenches un calcul de style ou un layout bah forcément par exemple si tu déclenches un
layout tu vas forcément de suite après derrière déclencher un paid et une composition c'est
comme ça ça marche toujours les uns à la suite des autres en fait ça il est obligé de recalculer
tout le reste voilà si si dans ton animation tu fais tu modifies des des propriétés et
bah ça veut dire qu'à chaque fois il doit recalculer toute la boucle c'est ça voilà exactement et
ça après évidemment ça ça va augmenter au fur et à mesure que plus tu vas animer d'éléments
bah plus il va devoir calculer les uns à la suite des autres bah la disposition donc par exemple
en fait toutes les propriétés ne soient appliquées au même étapes en fait par exemple le weed et le
hate ça s'applique au layout c'est le step où il va calculer la taille des éléments il va
placer dans le flux de la page par exemple ok donc en fait est ce qu'on pourrait dire qu'il faut
éviter de bouger ces informations là dans nos animations parce qu'elles vont être hyper gourmandes
parce qu'elles vont relancer le pipe à un niveau plus bas donc il va être obligé de relancer
tout le pipe ouais à chaque fois il doit tout relancer et tout recalculer et dans l'idéal il faut
bah utiliser que des propriétés qui font de la composition et c'est là et c'est là où j'en reviens
au début de la propriété transforme et opacity voilà en fait dans l'idéal pour les animations
il faut utiliser la propriété transforme et opacity c'est vraiment les propriétés à utiliser
en priorité avant toutes les autres ah ouais donc en fait on pourrait faire un truc avec une keyframe
et tout ça mais ça serait peut-être overkill parce que on y est à taper l'api vraiment très tôt
et ça relancerait le pipe de calcul et de rendu et donc ça serait très énergivore alors que si
on avait fait ça correctement en termes de performance on aurait resté en fait au niveau
de la composition donc la fin du tunnel de ce pipe là et on aurait beaucoup moins de ressources
consommées quoi. Bah tu peux utiliser transformé opacity dans une keyframe tu peux faire une animation
avec des transformés opacity mais effectivement c'est le fait que ça déclenche que la composition
en fait ça demande très peu de ressources au niveau du navigateur et c'est là où ça
te permet vraiment d'atteindre ses 60 fps facilement en fait sans s'enforcer. Ok donc un exemple tu
me dis si mon exemple il est pété ou pas c'est au lieu de changer la height du du titre par exemple
je vais utiliser la propriété transform qui va faire un scale en 1.24 par exemple ce qui va
faire que visuellement je vais avoir un rendu qui est pareil j'ai changé la hauteur néanmoins
en termes de perf j'aurais rien à voir. T'aurais rien à voir parce que si tu avais fait un height en
fait tu faisais taper dans le layout et donc tu faisais clencher le paint et la composition et donc
tu relançais trois étapes en fait dans le pipe au lieu d'en déclencher une seule. Il faut changer
en fait le pattern au lieu de vouloir changer le height en fait je garde le height initial
enfin la hauteur la height et je viens appliquer une propriété transform de scale et visuellement
j'ai un rendu qui est exactement pareil j'ai modifié la hauteur mais pas par le même mécanisme en
fait et donc ça et en plus ça sera beaucoup plus fluide en fait et pareil pour un peu d'exemple
aussi si je veux bouger un élément sur la page le faire par exemple tu as un menu un menu burger
qui va s'ouvrir sur le côté tu vas utiliser plutôt un translate translate plutôt que de le
faire bouger avec un left ou un truc comme ça tu vois parce que le left si tu utilises le left ça
va déclencher un layout donc la disposition et il va redéclencher un paint et une composition
alors que le translate x il va faire plus une composition ok et si je rajoute une opacité en
fait le on pourrait dire que le le menu il est en opacity 0 ce qui fait que je le vois pas je le
translate je fais une opacité à 1 et il devient visible voilà et ça ça déclenche que de la
composition donc c'est c'est l'idéal en fait ok ça c'est hyper important à vraiment comprendre
parce qu'en fait à la limite quand tu as un seul élément que tu vas animer ça peut passer que
ça déclenche chaque fois de la haute du paint mais si tu commences à animer plusieurs éléments en
même temps avec avec un keyframe un peu complexe et des éléments voilà plusieurs propriétés qui
sont qui transforment ton élément c'est là où tu vas commencer à avoir du lag et tes 60 fps
sont pas intégnables enfin c'est quasiment enfin j'ai trouvé des articles ils disent que c'est
quasiment impossible de faire des 60 fps si tu n'utilises pas les transformes donc c'est vraiment
vraiment quelque chose à vraiment utiliser en priorité transforme opacity toujours toujours
toujours avant d'y être autres éléments parce que c'est avec les autres éléments c'est très très
difficile d'avoir une animation fluide à partir du moment à plusieurs éléments et plusieurs
plusieurs propriétés qui changent ok et non et à imit est-ce qu'on peut et comment on fait
pour traiter un peu tout ça et comment on fait pour observer ces fps pour voir si en termes de
perf on est bon ou pas bah ça t'as plusieurs panneaux dans le devtools en fait qui permettent
de le voir donc au secours gardé tout à l'heure et ben à imit on va partager partager ça petit
spoil sur la suite mais on va inspecter on va inspecter la page on va lancer la palette donc
dans le devtools ouvert on va aller taper fps déjà là on a le show frame per second meter et on
peut un petit truc qui s'affiche en fait sur c'est un truc en overlay qui s'affiche et qui t'as
affiché en temps réel le fps donc ça c'est quand t'as des animations des animations qui vont
tourner en bout tout ça c'est plutôt pratique t'as tout il a tu as l'outil performance aussi
qui permet de donc tu vas enregistrer la page en fait après tu as les frames qui s'affiche tout
ça tu peux afficher les frames et il va te donner le nombre de fps par à chaque frame etc c'est
vraiment assez précis et puis la ressource que ça demande là tu y a des trucs à régler mais
normalement tu as vraiment les frames avec les cante à une animation en fait tu as un onglet c'est
marqué animation enfin il y a pas mal de choses frame là on voit on voit on voit parfaitement
toutes les frames et toutes les le nombre de frames par et à le temps par frame en fait qui
s'affiche quand tu passes la souris dessus donc ça permet de voir le temps que le temps que chaque
frame prend et puis après t'as aussi le onglet animation qui est un peu plus pour contrôler
les animations pour vérifier voilà comment l'animation se comporte tout ça mais qui est un peu
plus poussé mais je sais pas s'il y a les frames là dessus mais alors pareil sur l'animation on va
lancer la palette de commandes et on va taper animation show animation et on a un brover
animation qui nous permet en fait de venir analyser les animations qui ont été mis en place
on peut le rejouer le temps on peut rejouer on peut ralentir aussi les animations en
termes de debug c'est pas mal et on a un slider qui nous permet en fait de justement dire ok
à tel état à telle seconde qu'est ce que ça fait zoom in zoom out ce qui nous permet d'avoir un
niveau de granularité de précision on va dire dans le debug aussi hein parce que si on commence à
faire des animations un petit peu complexes là on voit en fait comment ça se passe et comment on
peut interagir et peut-être ralentir accélérer ou changer le ease la vélocité on va dire de de
l'animation alors pour ceux qui nous écoutent sur spotify ou sur sur sur votre application de
podcast sachez que on est aussi sur youtube et le fait de voir la vidéo je vous cache pas que sur
les animations ça peut être intéressant ok donc ça c'est dans notre devtools en fait on va avoir
des choses qui vont nous aider à justement traquer un petit peu toutes toutes ces informations
là quoi plutôt intéressant oui pas mal d'outils il y a aussi un lien alors css triggers qui permet de
ce que par rapport à ce qu'on parlait juste avant le fait de savoir quelle propriété et
déclenche quoi dans le pipe en fait donc c'est un site qui permet en fait de vérifier bah chaque
propriété qu'est ce qu'elle déclenche est ce qu'elle déclenche un paint un layout une composition
en fait les compositions de façon que les transformes et voir déjà sa déclenche la
route ou un paint voilà et ça permet de voir bah quelle propriété est plutôt gourmand en ressources
ou pas ah ouais donc ça en fait c'est un peu l'almanac de la performance ou est un peu ça
en fait donc tu peux cliquer sur une propriété ça ouvre un petit panneau qui te dit voilà ce que
ça déclenche après donc c'est par broseur en plus exactement et en fait alors ouais c'est pas
tout à fait par broseurs c'est par moteur de rendu quoi est moque web kit gecko ou donc après c'est à
nous de connaître voilà on sait que firefox c'est avec gecko et web kit et tout ça ok
il y en a de moins en moins de ça c'est aussi oui mais en même temps aussi je pense que
refaire un moteur de rendu de navigateur bah c'est vachement vachement taf donc c'est aussi
compréhensible que à un moment donné on va pas réinventer la roue quoi d'autant qu'ils sont
sous ils sont tous open source un fold noté c'est que des moteurs qui sont open source c'est après
chaque chaque entreprise utilise le moteur et fait ce qu'ils voient avec mais c'est des moteurs
qui sont open source gecko chromium web kit donc chacun on peut même nous faire un navigateur
sur ma vie pour concurrence et chrome bon courage les gars bon courage ok donc c'est vraiment
c'est vraiment quelque chose qu'il faut se mettre dans la tête si vous nous écoutez là c'est
utiliser en priorité il n'y a que ça à retenir de tout l'épisode c'est utiliser en priorité
transforme et opacity voilà c'est il faut partir de là voilà et donc vas y vas y
dans le cas où bah t'as besoin d'utiliser une autre propriété donc il y a une propriété qui
existe en fait c'est wheel change donc tu vas le mettre sur un élément où tu vas utiliser autre
chose que transforme et opacity et tu vas dire à ton browser à ton navigateur bah cet élément il
va subir des transformations donc prépare toi en fait et si j'ai bien compris c'est il le met sur
un layout un petit peu différent que les autres parce que cet élément va va bouger seulement dans
tous les articles que j'ai lu là pour préparer l'épisode en fait il te il te dit vraiment c'est
à utiliser en dernier recours en fait il faut pas systématiquement l'utiliser le wheel change
c'est vraiment un dernier recours ou un problème de performance et que tu as du lag au niveau
de ton animation et c'est là où tu peux utiliser mais il faut éviter d'ensemble de l'utiliser
parce que ça ça apporte d'autres problèmes en fait au niveau de mémoire déplace ton problème
voilà ça déplace ton problème et si tu l'utilises sur trop d'éléments en fait ça va te bouffer
de la du procès tout ça donc attention à ça quand même et le fait de jouer avec transforme et
pas city est-ce que ça va pas amener des problèmes d'accessibilité d'elle transition
alors évidemment il ya des gens il ya des personnes pas forcément avec des handicap qui
sont pas fans des animations qui aiment pas avoir des choses qui bougent à l'écran ça dérange
ou qui ont des problèmes de voilà ça peut déclencher des problèmes au niveau du cerveau donc
il ya une on a possibilité aujourd'hui au niveau du navigateur ou même je crois de l'os de demander
de pas avoir d'animation et pour ça on a des médias qui ont hérit qui existent qui existent
en fait c'est prefers reduced motion qui permet de dire que si cette personne là l'internaute ne
veut pas d'animation on désactive les animations donc c'est important de l'utiliser parce que
vraiment il ya des personnes ça gêne vraiment d'avoir des éléments qui bougent à l'écran donc
c'est important de le prendre en charge et alors je dis pas que je le fais attention mais il faut
essayer de l'utiliser pour enlever les animations dès que quelqu'un demande de retirer les animations
ok ouais c'est une sorte de bonne pratique où tu laisses la possibilité à l'utilisateur d'appliquer
ces règles sur sur sa navigation et sur son type de navigation voilà bah oui c'est hyper important
pour quelqu'un qui voilà qui n'est pas à l'aise avec un n'a pas qui navigue avec un clavier
ou qui peut pas cliquer facilement tu vois il est vraiment différent cas de figure qui fait
que qui font que bah il faut désactiver les animations parce que ça port à la base ça
apporte plus de les deux c'est juste de l'esthétique en fait c'est pas vraiment utile pour la navigation
ok je comprends je comprends parfaitement un autre point moi je vrai je suis pas tu es un peu
fainé en comme bon dev en bon dev qui se respecte les animations ça me soulue un peu mais j'ai
envie de de rendre on va dire mon site un petit peu plus sexy un peu plus animé est ce que je
pourrais pas récupérer des animations qui assure le net est ce qu'il n'y a pas des librairies ou des
choses que je peux que je peux utiliser direct out of the box parce que moi je suis une feniaise quoi
ouais pas comme tous les devs
bah oui j'en ai trouvé deux liens mais il y en a certainement plus il ya animista et animate point
point style url mais c'est animaïde point css animaïde point css en fait c'est librairie que tu
intègres directement tu peux utiliser des classes en fait sur tes éléments et donc ajouter des
animations sur tes éléments facilement rien qu'avec des classes que tu utilise en fait que tu crées
rien du tout juste tu utilises la librairie avec les classes voilà t'as plein plein d'animations
donc ceux qui sont en vidéo qui regardent la vidéo on va avoir le le le pulse on peut avoir le
shake x le shake y donc ça ça ça bouge et check voilà on va avoir plein d'animation est ce que par
compte quand on vient apporter ce style sheet parce que là pour le coup je pense que c'est un c'est
une librairie css si on utilise une classe c'est quoi est ce qu'on est obligé d'importer tout parce
qu'en fait ok je viens créer je viens ajouter une nouvelle librairie une dépendance en clair est ce
qu'il y a une sorte de trichacking sur sur ce type d'animation de librairie on va dire out of the
box ou c'est à moi de programmer parce que clairement là il y a je sais pas il y a peut-être une
centaine d'animations qui sont plutôt sympa voilà très bien par contre si j'en utilise deux est ce
que ça vaut le coup d'importer et de m'infliger en fait c'est quoi qui peut être énorme et donc
est ce qu'il y a possibilité je sais pas de faire une sorte de poste un poste ouais voilà exactement
merci patrick c'est exactement le cas je sais pas du tout utilité classe bonne question je sais pas j'espère
qu'il l'ont plus mais ouais après peut-être aussi à nous d'aller récupérer les bonnes ouais rien
empêche d'aller chercher les bons éléments pour justement éviter de bah d'aller infinit
animation voyons voir la dog vite fait ça il parle de redish motion voilà le mediacuré
qu'on vient de dire ne pas de pas désactiver c'est important ouais en tout cas c'est c'est quelque
chose qu'il faudrait peut-être garder en tête pour ouais parce qu'en fait c'est un truc typique
c'est pareil sur les fonds tossum ou les choses comme ça on vient on vient ajouter un paquet paquet
de de de propriété et on en utilise deux icônes quoi donc à un moment donné aujourd'hui on sait
que la performance ça rentre en compte partout aussi bien pour l'utilisateur que pour pour notre
ami google et son sio mais surtout pour l'utilisateur aujourd'hui quel un site qui est lent il va être
pénalisé immédiatement par l'utilisateur quoi donc venir charger chargé beaucoup beaucoup
d'animation pour en utiliser que deux je pense qu'il faut être il faut être malin quoi après c'est
pas si purge css est capable d'aller purger tout ça faut avoir faut à tester et de garder
il faut aller il faut aller il faut aller chercher par contre sur animista là pour le coup on vient
partir d'une base mais on peut alors le anime css c'est vraiment out of the box je prends mes
classes mes classes utilitaires et ça fait rien à faire c'est juste une classe ça marche tout seul
et là sur le site animista.net je vais partir d'une base on va dire de flip ou de rotation 90 et
là je vais en va dire tweeker avec des menus donc visuellement je vois ce que ça fait et je vais
pouvoir modifier c'est une librairie de c'est une librairie de mouvement que tu peux customiser et
après tu récupères le code et tu l'intégrer dans ton code css et donc ça te permet de c'est
plutôt un assistant à la création d'une animation ouais c'est quand tu tu veux faire une animation
voilà tu sais pas comment faire bah tu vas dedans t'as pas mal d'animation et il y en a beaucoup beaucoup
beaucoup et après tu récupères ton code css tu l'intégrer donc là c'est propre et ça te permet
en plus de customiser donc c'est plutôt pas mal librairie assez complète qui permet de faire du
voilà tu récupères le code et de l'intégrer et il y a tout ce que tu veux des flips enfin
vraiment beaucoup de choses et là pour le coup c'est bien plus déficient parce qu'on choisit
uniquement ce qu'on veut on crée ce qu'on veut et même si on n'a pas on ne connaît pas par coeur
toutes les propriétés on peut interagir via des menus et ça nous permet de construire notre
animation spécifique et derrière ça nous génère le code automatique ouais et en plus ça me permet
d'apprendre éventuellement si tu veux apprendre aussi comment on fait tel ou tel animation ça
te permet de voir les propriétés utilisées et puis t'apprend au fur et à mesure comment
les faire carrément carrément carrément c'est plutôt c'est plutôt pas mal excellent tout ça
voilà donc on a on va donc mettre pas mal de liens au niveau des notes de l'émission donc il y a
pas mal d'articles de web.dev sur la performance d'animation tout ça comment créer des animations
il y a deux liens aussi sur des cours sur les motion pass et puis sur open classroom il y a des
cours qui sont plutôt bien fait pour apprendre à comment faire des animations css tout ça
ça part du basique jusqu'à un petit peu plus poussé et puis il y a les liens aussi sur les
deux sites qu'on vient de montrer là. Parfait. Un grand merci Patrick un grand merci à tout
le monde d'être resté jusqu'au bout de l'épisode et on vous dit à bientôt sur le prochain
épisode. Merci ciao. Retrouvez double slash sur le plateforme de podcast préféré et sur le
site internet du podcast www.slash-podcast.fr sur le site vous allez retrouver tous les liens
d'épisode les références évoquées durant l'émission