Bonjour à tous, bienvenue sur ce nouvel épisode de Duelo Slash, comme d'habitude nous sommes
avec Alex, salut Alex ! Salut Patrick, salut tout le monde !
Donc dernier épisode de notre série animation de l'été, donc on va parler de JavaScript,
d'animation avec JavaScript, c'est toi Alex qui va nous en parler le plus et donc voilà,
tu nous présentes un petit peu l'épisode ? Yes, en fait avant de partir directement sur
les librairies et comment faire et tout ça, je pense que c'est hyper important de bien comprendre
le mécanisme sur les animations en GES. On a déjà vu pas mal de choses sur l'épisode
CSS où on vient expliquer les transitions, les animations, de la même manière en fait là on
va rajouter une surcouche en fait avec avec du GES. Par contre ça me paraît important de bien comprendre
déjà ce que c'est une animation en CSS parce que rajouter du GES par dessus, ça va rajouter de la
complexité et utiliser des animations en GES pour faire juste un changement de couleur, c'est
complètement overkill quoi, ça ne sert à rien. Donc je pense que déjà il faut bien comprendre
que sur du GES si on veut animer des choses en GES c'est qu'on va faire des choses qu'on ne peut
pas faire en CSS parce que le niveau de complexité est un petit peu plus compliqué et un petit peu
plus poussé en fait. Donc dans un premier temps on va parler vraiment des concepts de base de bien
expliquer les grosses briques qu'on va retrouver dans toutes les librairies. En fait si on maîtrise
ces concepts là on pourra passer d'une librairie x à y, ça va c'est pas gênant si on a compris
les fondamentaux. Une fois de plus en dev c'est toujours les fondamentaux qui priment. Déjà parce
que j'aime bien mettre des petits tackles, il faut arrêter d'utiliser jiquari déjà,
premier truc. Il y a des gens qui l'utilisent encore, tu rigoles. Non mais on regarde le net,
bon de toute façon ça fait deux ans depuis la naissance du podcast je pense qu'on t'accle
de jiquari, c'est devenu le running gag mais en fait ce qui est sûr c'est qu'il faut éviter
d'utiliser jiquari pour faire nos animations, ça sert à rien. Donc comme en CSS en fait le gros
concept de base c'est on va aller définir la target. En fait sur notre sélecteur en fait on
pourrait dire en CSS mais qu'est ce qu'on va animer. Sauf que là on va, vu qu'on est en JS,
on va pouvoir utiliser tout le panel du JS donc notre target, l'élément qu'on va vouloir
animer, ça peut être un E du DOM, ça peut être un sélecteur CSS mais aussi un objet JS et de la
même manière un objet JS ou un tableau d'objet. Alors ça paraît un petit peu conceptuel.
Dans ton tableau, dans ton objet c'est quoi en fait l'objet ?
Par exemple si tu veux animer des valeurs que tu as récupérées depuis une API, en fait ces
valeurs c'est un chiffre, tu veux animer ces chiffres là, tu veux par exemple les faire
partir de zéro et arriver à 23% parce que le 23% c'est l'information qui t'as récupérée depuis
ton API. Tu vas pouvoir les animer avec, tu pars de zéro donc ta valeur, tu vas modifier la valeur
en fait que tu récupères, tu la fais partir de zéro et tu la fais terminer à la valeur que
t'as récupérée de ton serveur. Donc tu peux animer un objet JS.
Des valeurs quoi, ouais des valeurs. Après un objet JS c'est que les valeurs. Donc ça c'est
un objet classique, tu vas modifier des propriétés donc tu vas lui appliquer des propriétés qui
peuvent être la durée, la vélocité donc c'est le easing qu'on a déjà parlé. Tu vas pouvoir lui
appliquer une animation spécifique avec une direction si c'est infini, si ça tourne une fois,
deux, trois, quatre, cinq fois la répétition ou tout simplement tu vas lui appliquer la valeur
tant de pourcentage ou un chiffre déterminé spécifique. Ça c'est vraiment le concept de base
de pour chaque élément. Après en fait on va pouvoir définir ce concept de keyframe. Alors on
rejoint aussi ce qu'on a vu déjà sur du keyframe. Ça ressemble beaucoup à l'épisode SS là pour
l'instant. Exactement, et sur ce keyframe en fait on va pouvoir appliquer à tel moment on va
appliquer telle propriété. Donc pour l'instant on va dire c'est assez classique. Par contre le fait
d'avoir un keyframe on va pouvoir lui avoir un niveau de granularité bien plus précis parce que
même si en CSS on va jouer avec des sélecteurs CSS là on va pouvoir jouer avec des propriétés
bien plus étendues. Donc ça amène déjà bien plus de possibilités. Après il y a un concept
qu'on ne peut pas faire en simple CSS. C'est cette notion de staggering, de stagger. C'est ça.
En fait ça serait une sorte de séquençage et d'application de l'animation
un par un. Je m'explique avec un exemple on va tout de suite comprendre. Par exemple je veux animer
une carte ou c'est une carte avec un utilisateur. Donc je vais animer cette carte, je vais définir
toutes mes animations sur cette carte. Sauf que si la carte elle est affichée 12 fois dans ma page
les animations vont se faire 12 fois en même temps au moment où la carte est affichée. Et donc moi ce
que je voudrais c'est la première. Ça a été un petit peu violent pour le navigateur. Alors oui
de toute façon on en parler un petit peu plus tard mais ça peut être super violent et en
termes de perf on va reprendre les fondamentaux qu'on a vus sur qu'est ce qu'on va observer. Par
contre ce qui est sûr c'est que l'effet visuel va pas être très très joli si on a les 12 éléments
qui s'affichent en même temps ça va pas être joli. Justement le fait de staguer ou d'utiliser du
staggering en fait on va dire tu vas déclencher le premier élément, on va dire la première instance
de carte, tu vas l'animer, puis la deuxième instance de carte tu vas déclencher son animation
0, 1, 0 ou une seconde après. Ce qui fait qu'on a une sorte de séquençage automatique ce qui nous
permet en fait depuis un même élément ou un même composant qui a la même propriété d'animation
on va pouvoir lui appliquer un délai dans le temps sur l'exécution de cette animation ce qui nous
permet en fait d'avoir un effet visuel en une sorte de propagation ou oui ça serait un peu
l'élément une sorte de propagation quoi. Donc dans le cas où tu cibles un élément avec une classe
donc forcément tu as plusieurs classes plusieurs éléments tu peux mettre un délai entre chaque
début d'animation entre chaque élément ça va lancer une sorte de cascade en fait. Voilà exactement
c'est une sorte de cascade c'est une sorte de j'aime bien l'idée de séquençage en fait on vient
séquencer malgré le fait qu'on utilise le même élément la même animation tout ne va pas se lancer
en même temps on vient séquencer l'arrivée et donc ça c'est assez puissant et donc c'est
intéressant. Mais ça c'est quelque chose qui est automatique dans certaines dans certaines
librairies ou c'est toi qui doit régler toi même ? Alors en fait on a dans la majorité des
librairies on a accès à ce staggering et on va lui soit spécifier en mode stagger soit délai
voilà ça va on va pouvoir jouer en fait avec cette propre propriété. Ok mais c'est vraiment
quelque chose qui fait partie de toutes les librairies qui est en charge. Oui c'est une
fonctionnalité qui est pris en charge pour on va dire une librairie de js qui fait de l'animation
va gérer cette propriété et nous donne accès à cet API pour pouvoir justement séquencer
l'exemple typique c'est un élément la même animation mais j'ai 50 instances je vais pas
mettre tout en même temps je vais pouvoir les stagger. Bien sûr carrément. Un deuxième concept
qui est aussi prépondérant à toutes les librairies ça va être cette notion de timeline donc on va
se rapprocher de ces notions de keyframe mais là pour le coup c'est pas l'élément qui va être
pris en compte ça va être l'animation globale c'est à dire au début de mon animation je vais
pouvoir pointer différents éléments et c'est là où en fait on commence à avoir un peu le chef
d'orchestre qui se met en place c'est au lieu d'avoir un prisme d'entrée de l'élément et d'animer
cet élément avec la timeline je vais pouvoir animer plusieurs éléments en même temps c'est à dire
au début de mon animation je vais pouvoir lancer différentes animations des différentes petites
animations dans cet élément à un autre point de passage je vais pouvoir déterminer pareil donc
je vais pouvoir en fait orchestrer toutes ces animations de tous ces éléments là avec une timeline
séquencée parce que si j'ai un élément c'est plutôt facile on peut faire ça en css ou peut
être avec un peu de gs mais c'est relativement simple si on commence à avoir plusieurs éléments
pas un exemple typique ok je veux que la photo elle vienne sur la gauche le titre il vienne depuis la
droite et quand je scroll il ya le bloc de texte qui apparaît à mon scroll là ça commence à être
un petit peu plus compliqué en termes de timing c'est un petit peu plus compliqué donc c'est là
où on vient mettre cette notion de timeline où en fait on va vraiment orchestrer tous les éléments
qu'on veut et le déclenchement ce qui fait que c'est vraiment des petits blocs et là on vient ajouter
au niveau d'abstraction au dessus on vient orchestrer tous ces blocs là ok donc contrairement à css ou
le keyframe la timeline c'est vraiment un élément là on est vraiment sur une timeline globale en
fait de ton animation qui prend en charge plusieurs éléments et exactement en fait ce qu'il faut
comprendre c'est que la timeline c'est pas l'abstraction de l'élément c'est l'abstraction de
l'animation globale et générale ok donc en fait il faut il faut voir ça comme quand on fait du montage
vidéo ou sur after effect ou sur flash pour les anciens on a vraiment cette notion de timeline où
on va séquencer tout ça et je l'ai déjà évoqué tout à l'heure juste mais on va avoir
cette notion de contrôle c'est un concept qui est important c'est à dire à quel moment c'est une
sorte de trigger en fait le contrôle c'est à quel moment on va lancer notre animation est ce que c'est
lancer mon app... mon animation ou ça va être quand je clique ben quand je clique je vais déclencher
cette animation là ça va être par exemple quand mon élément arrive dans le dans le dans le viewport
merci la nouvelle api enfin pas la nouvelle mais elle est aussi elle est relativement récente de
interaction observer qui nous permet en fait d'interagir quand l'élément est dans le dans
le dom je vais pouvoir lancer cette animation là pareil à mon scroll je vais pouvoir lancer
mes animations à tant de pourcentage de scroll de ma page je vais déclencher telle animation et là
en fait ça nous donne des un niveau de granularité un niveau de précision qui est vachement plus
plus poussé tu contrôles vraiment quand une animation se déroule quoi c'est déclencher
exactement et c'est vraiment cette notion de chef d'orchestre quoi qui est hyper important mais
qui va pouvoir être déclenché avec cette notion de trigger de contrôle de contrôle quoi qu'est ce
qui fait que ça lance mon mon animation ok et dernier dernier concept qu'on va retrouver un
petit peu partout c'est cette notion de d'exécution de de javascript soit au début de l'animation
soit à la fin de l'animation on va on on va choisir mais c'est cette notion de callback
ou promesse voilà un exemple typique je scroll c'est la fin de mon animation à la fin de cette
animation je vais lancer un appel à pays pour aller récupérer le score ou quelque chose
sur donc dans cette animation là c'est l'animation qui va déclencher en fait cette fonction javascript
donc j'ai pas besoin de mettre un timer où je sais que mon animation elle fait deux secondes donc
je mets un 7 de 2 secondes et après j'appelle non là je scroll la fin de l'animation arrive
c'est à ce moment là que je fais mon appel à mon serveur où j'exécute du javascript pour
changer quelque chose hyper important parce qu'en fait comme tu dis le fait de mettre un 7
time out n'importe quoi parce que tu sais que l'animation elle dure deux secondes ou quoi mais en
fait elle peut durer plus longtemps en fonction de la machine sur laquelle elle exécuter ça peut
prendre plus de temps parce que ben il y a moins de ressources et effectivement tu vas faire ton
appel trop tôt par rapport à la fin d'animation et là ça te permet vraiment de la faire vraiment
c'est ça c'est hyper pratique et puis là tu as un effet ben ça marche pas je comprends pas
qu'est ce qui se passe c'est donc pour le coup si on veut si on fait des choses assez précises et
assez complexes en fait on va être obligé de passer par par c'est librairie par toutes ces
librairies là par contre c'est hyper important de bien comprendre ces concepts là quoi donc vraiment
ok qu'est ce que je vais animer quel est l'élément quel élément que je vais que je vais animer quelle
propriété je vais lui je vais lui donner cette notion de staggering où je vais pouvoir le déclencher
en mode séquence où je vais utiliser ma timeline où là je vais orchestrer tel élément puis tel
élément puis tel élément et l'avantage que je vais avoir avec cette timeline c'est que je vais
pouvoir lui dire c'est je vais lui définir les propriétés de fin ou les propriétés d'entrée je
vais pouvoir choisir par contre alors ça c'est une ça serait une bonne pratique c'est de choisir
vraiment toute notre notre animation on donne les propriétés d'entrée et les propriétés ou les
propriétés de sortie parce que si on fait on change si on fait du from tout machin c'est hyper
complexe on s'embrouille nous-mêmes quoi donc c'est ok on part du principe que l'animation
elle décrit les propriétés finales en tout cas souvent c'est les bonnes pratiques qu'on
met c'est de mettre les les les informations finales et on vient animer à l'entrée et on vient
écrire de manière explicite les propriétés qui sont à la fin de l'animation une fois que l'animation
sera terminée le rendu de la page sera comme ça et on vient écrire les les animations d'entrée
et comme ça on arrive on a décrit le résultat final de la page donc cette notion de timeline
et cette notion de contrôle est-ce que c'est quelque chose d'automatique ou du scroll ou du viewport
et tout ça une fois qu'on a dit ça en fait ok on a toutes les bases en fait pour construire en fait
notre notre animation là pour le coup c'est assez conceptuel pour ceux qui nous écoutent et pour
ceux qui ont la chance de nous voir sur youtube on va passer sur sur des choses un peu plus
on va tout de suite voir des choses les librairies exactement les librairies alors
on y en a beaucoup qui sortent un peu tout le temps et et c'est un monde qui évolue quand même
assez vite la plus connue et je pense que ça me paraît difficile de pas parler de de green
sock je connais ou aussi j'ai sap c'est je pense que c'est l'historiquement c'est celle qui a
permis de faire des choses les plus poussées et assez tôt maintenant ils sont à la version 3
quelques soj oui 3 10 3 14 et en fait ben directement depuis le site green sock.com on voit en fait
tout le la possibilité de rendu alors évidemment sur la page d'accueil ils vont mettre un peu
des trucs et fait et fait waouh parce que sinon c'est pas c'est pas intéressant mais là en fait on
voit parfaitement que l'animation suit ma souris ce qui fait que mon pointeur et et l'élément
déclencheur donc c'est le contrôleur vraiment le contrôle c'est c'est ma souris quoi
green socks je vois souvent utiliser avec des éléments que tu scrolles en fait et ça déclenche
les mouvements en fait avec le scroll en même temps comme on peut voir sur le site apple souvent
qui va déclencher tu vas scroller et l'ordi va tourner machin tout ça ouais ouais avec des en fait
ce qu'il faut comprendre c'est que cette cette cette animation en fait cette librairie là elle est
il y a un concept de un socle de base un truc corps on va dire et après il y a des il y a des
des plugins qui viennent rajouter et étendre en fait les fonctions un exemple typique c'est
justement les l'animation des svg en fait c'est une surcouche que tu vas mettre en plus de 2 g
sap ok ça permet d'utiliser que ce que tu as besoin en fait un vraiment un corps et après tu
fais exactement exactement pareil pour pareil pour le pour le pour le web gl où tu vas pouvoir
injecter du web gel même si aujourd'hui on avait déjà vu ça avec avec bruno sur trigiesc
de la même manière le canva tu vas pouvoir animer les les tags ce qui regarde en vidéo
c'est moi je vois les vidéos sur l'écran je me demande quand on va faire des trucs pareil c'est
hyper hyper hyper conceptuel quoi et bah pareil il y a un motion pass plugin qui pour le coup en
fait bah nous permet de suivre un tracé en fait c'est ça exactement donc alors je pense qu'ils
ont sorti ça bien avant que ça soit natif dans le dans le navigateur mais bon c'est un peu la suite
aussi de le logique des choses c'est d'abord des librairies puis après les gens qui travaillent sur
les navigateurs se regroupent et disent bon bah ça on peut l'intégrer de manière native et c'est
devenu et ça rentre dans le côté natif ce qui est bien parce que bah ça nous supprime des librairies
des dépendances et tout le reste mais clairement on prend vraiment une claque sur sur sur des sites
sur des sites comme ça et ça typiquement en css maintenant on pourra le faire c'est ce qu'on a
l'écran à l'exemple de petits rectangles qui suivent le tracé c'est quelque chose qu'on peut
faire nativement maintenant enfin donc mais c'est sûr que c'est assez récent que les constructeurs
des navigateurs s'entendent maintenant qu'ils arrivent à implémenter des choses mais c'est vrai
qu'avant c'était obligatoire de passer par ça et et carrément et d'autant plus que que là maintenant
enfin on peut justement c'est ce que t'évoquait tout à l'heure sur rappel ou sur des choses comme
ça c'est la réaction au scroll donc on va pouvoir lancer l'animation au scroll ou bouger les éléments
à notre scroll de souris et là en fait ça donne une expérience d'immersion totale voilà enfin
de façon je pense que tout le monde a vu le site de apple ou des choses comme ça ou pour le coup
c'est vraiment super super stylé et en plus bien plus qu'un simple effet parallax quoi c'est ça
vient vraiment animer ok il ya la photo qui vient de gauche des droites on vient faire des super
positions et même le lancement de vidéo en fait on peut aller faire du frame frame by frame sur
sur le scroll de vidéo donc c'est c'est vraiment hyper hyper hyper précis et on récupère l'intégralité
de de de green socks et de toutes les les animations qu'on a déjà c'est à dire ok est-ce qu'il est
ce qu'il faut comprendre c'est que c'est le pionnier en termes d'animation c'est là où il y aura aussi
le plus de tutos possibles sur partout sur sur le net il ya des formations qui sont très très bien
qui sont hyper poussées là dessus et une fois de plus dès qu'on commence à faire de l'animation il
a vraiment cette dimension esthétique et design et créatif qui rentre en compte et c'est pas négliger
quoi c'est c'est pas le tout de vouloir animer plein de choses il faut qu'il y ait un semblant quand
même de créativité il faut que ça soit joli et agréable à l'oeil donc il faut quand même
développer son côté esthétique c'est là où on parle de créatif développeur ouais clairement
si si on n'a pas ça c'est un petit peu il suffit pas d'utiliser screenshots pour pour faire des
belles animations il faut c'est non c'est pas aussi simple non c'est pas c'est pas du tout aussi simple
je parlais de timeline en fait sur sur gsap c'est c'est un c'est un plugin qu'on vient rajouter et
qui qui nous donne toutes les toutes les cette notion de timeline et de point de passage quoi ok à
tel point de passage tel élément va avoir tel propriété à tel point de passage et en fait on
vient séquencer le cette cette timeline quoi donc on peut faire des on peut mettre des pauses on
peut repartir en arrière on peut voilà on peut faire tout ça la doc est plutôt bien fait il ya des
il ya des cheat sheet qui sont plutôt bien qui nous permettent en fait de bah dans oui est ce que
dans l'ensemble toi tu l'as déjà utilisé moi jamais la courbe d'apprentissage est elle est
dure ou c'est plutôt facile à utiliser alors au départ on prend vraiment la vague on dit ouais
je comprends pas mais au final ça se structure et pour le coup le fait de bien comprendre ok mon
élément mon stagueur ma timeline mais qui frame fait de bien comprendre les concepts de base une
fois qu'on a compris ça bah en fait c'est beaucoup plus fluide et après c'est que de la grammaire
c'est ok la librairie elle me dit que ma timeline tout bon bah ça va aller vers la propriété donc
je vais définir la propriété de fin de sortie ou d'entrée from et une fois qu'on a ça une fois
que c'est plus clair bah ça passe ça passe mais oui il ya il ya des un petit peu d'apprentissage un
petit peu au départ qui est un petit peu qui est un petit peu violente ça fait ça fait beaucoup de
code quand tu fais des animations ou ça reste quand même assez conci ouais ça fait beaucoup de
code ouais ouais ça fait quand même beaucoup de code après ce qui est intéressant c'est bah on
revient sur les mêmes fondamentaux c'est au lieu de faire une animation de but en blanc et de toute
l'écrire essayer de sortir et de faire des appels de fonction c'est à dire je lui donne ma
fonction je vais lui donner un élément et une direction par exemple et bah ma fonction elle va
appliquer un effet d'opacité un effet de rotation ou de translation et en fait le fait de
découpler et d'utiliser uniquement des fonctions en utilisant jessap on va pouvoir réutiliser
ces informations là un exemple typique que moi j'avais utilisé jessap c'était sur la transition
entre des entre des pages donc le projet était en angleterre bizarrement étrange mais entre la
navigation des des pages je voulais en fait avoir un effet de slide droite ou un effet de slide
gauche et bah clairement c'était sur le sur le routeur donc là je venais appliquer si c'était
un retour je faisais de gauche à droite et ou de droite à gauche selon selon la navigation
bah moi je voulais pas refaire la même chose encore et encore donc j'avais j'avais mis en place des
des fonctions et ça passe ça passe plutôt plutôt bien et pareil sur sur des notions de scrolls où
en fait on va animer l'image se grandit jusqu'à prendre 100% et ça marche plutôt bien par contre
ce qu'il faut savoir sur sur green socks c'est que il y a beaucoup d'informations par contre
ils ont une sorte de club de club qui nous donne accès en fait à des à des outils pour débuguer
et monitorer nos animations sur la création et en fait on va retrouver ça aussi sur une autre
sur une autre animation mais là c'est un club qui est payant qui coûte à l'année je crois
ouais entre 100 et 200 200 dollars qui va nous donner en fait accès à des plugins en plus et des
outils pour pour débuguer mais beaucoup de choses ce qui fait vraiment à la différence c'est le
devtools quoi c'est le devtools pour pouvoir justement débuguer et inspecter notre animation
parce que si on fait des choses simples bon c'est ça passe on peut très vite s'en sortir on peut
plus facilement s'en sortir par contre dès qu'on commence à avoir des animations un petit peu
plus complexes avec beaucoup d'éléments sans ça c'est l'enfer quoi c'est un cauchemar donc
le devtools ça mène vraiment une grosse plus-value et pour le coup je n'ai jamais utilisé ça
parce que c'était relativement simple ce que je faisais j'avais j'en ai jamais eu le besoin mais
je pense que c'est c'est nécessaire si on veut passer sur des choses d'envergure quoi
ok ça reste raisonnable au niveau tarif ça fait beaucoup d'animation après ce qui faut comprendre
enfin ça on parle un petit peu plus commercial mais en fait si client est prêt à payer ça et voit
une valeur en fait je vais je vais reformuler le clé le client en fait on peut très vite arriver
sur des effets wow et en fait ça ça se monétise et on peut très facilement lui expliquer que pour
créer cette animation c'est seulement énormément de temps et c'est compliqué donc on peut facturer
et les créatives développeurs peuvent il ya plus de limites en fait sur ça va être très difficile
un créatif des développeurs va plus facilement vendre la valeur finale du produit l'effet
est ce qu'on tait que vraiment ok un tjm jour ou c'est temps quoi et donc bah passer sur sur ce type
de techno ou de créatives développeurs on va pouvoir vendre des choses beaucoup plus chères
quoi donc ce qui est aussi pertinent de nous un de monter en compétence deux d'avoir des outils
qui nous permettent de faire ça plus rapidement et de gagner du temps et parce que derrière on va
pouvoir potentiellement vendre aussi des animations des petits effets des valeurs quoi
il puisse différencier par rapport aux autres développeurs parce que toi tu fais des choses
un peu plus animées c'est clair pas hésiter à se former là dessus et green socks il ya une
autre librairie qui s'appelle anime js et toujours dans le même concept on va vraiment retrouver les
mêmes fonds fond fondamentaux quoi donc le le le le le staggering la transformation des
des éléments avec du css classique du contrôle de de callback avec des timeline là ça réagit à
mon clique c'est hyper fluide en fait animation c'est incroyable c'est vraiment super super super
classe et c'est ouais ça amène vraiment une grosse grosse plus value toujours là là on va
retrouver une doc qui est extrêmement extrêmement bien faite avec des petits des petites animations
ce qui fait que chaque élément va être animé dans la doc alors que la doc de chez green socks va
être beaucoup plus brut parce que je pense qu'elle est historiquement déjà plus vieille ouais je
pense que anime js est un petit peu plus récent et eux ils ont vraiment incorporé toutes ces
les des petites animations par des petits exemples en fait par des petits exemples donc on comprend
tout de suite qui elle va être le rendu et comment ça commence à écrire ce qui nous amène en
fait bah c'est beaucoup plus facile en fait à jouer avec et donc je dirais que la documentation de
anime js est vraiment super super super bien faite parce que c'est out of the box quoi on peut on peut
tout de suite on comprend instantanément comment ça marche et on reprend on va retrouver les mêmes
choses le contrôle la timeline et tout ça mais en tout cas une grosse grosse plus value sur anime
js sur sur la doc par contre toutes ces toutes ces enfin les deux librairies qu'on a évoqué pour
l'instant elles sont assez gourmandes elles sont assez lourdes comme c'est lourd souvent c'est lourd
et c'est là où on y a le dernier la dernière librairie qui est on va dire qui pop en ce moment on
va dire allez c'est c'est motion wine pour le coup et ils ont ils ont vraiment ils sont vraiment
focalisés sur le poids donc la taille de de l'animation qui est enfin le poids de la librairie pardon par
contre sans négliger les performances ouais et ils vont même en fait jusqu'à mettre un tableau
comparatif donc voilà ils sont et ils disent voilà nous par rapport à anime js et bah le bundle
size chez motion one c'est 3.8 chez anime js c'est 7 et chez kainsox c'est 23 5 donc voilà on passe
quasiment du pas du impourdisme et du qui l'optale on parle oui et pour le coup il donne aussi accès à
toutes les api où il dit voilà sur sur green sox c'est le c'est le socle mais derrière vous devrez
rajouter plein de plug-in alors que chez nous bah c'est en c'est en natif quoi donc dans le corps
qui est super laïs tu as déjà tout en natif dedans exactement exactement après c'est comme tout une
librairie qui vient après les autres elle bénéficie de tout l'historique et de toutes les erreurs que
on va dire pas les erreurs mais les points noirs que les autres librairies ont mis en place bah eux ils
peuvent plus facilement les pas il y a toujours une primeur au dernier arrivé quoi donc donc en tout cas
celle chez nous est vraiment l'accès sur sur le poids ce qui vient en fait minimiser le le bundle
final et c'est toujours c'est toujours bon sur les perf aussi par le parrain de perf aussi sur
ouais c'est quoi les best best in dev c'est quoi il y a des outils disponibles aussi exactement en
fait ils ont une une un inspect tous qui va nous permettre en fait d'aller débugger et d'aller
clairement de voir comment on peut jouer avec avec tout ça et si en clair si on a des des choses
relativement simples c'est on peut s'en passer dès qu'on arrive sur des éditions un petit peu
plus complexes oua c'est méga méga méga compliquée donc le depth tools devient quasiment indispensable
sur sur des choses d'envergure quoi par contre c'est open source motion one motion one oui il me
semble je suis pas sûr mais je vais regarder on peut aller voir sur le github sur le github
mit license et pour le coup ils ont fait plusieurs alors le depth tools c'est payant c'est à dire
le motion depth tools normal oui voilà il est à 50 euros à l'année il me semble alors 50 euros
il dit pas changer peut-être qu'ils ont changé le le le pricing parce que il n'y a pas longtemps
il était à 60 balles à l'année et là je vois il n'y a pas cette notion d'année donc est-ce que
c'est un one fees je sais pas du tout pour le coup on mettra je passerai peut-être j'essaierai de demander
au gars parce que c'est vraiment classe ce qu'il faut comprendre c'est que motion one c'est agnostique
donc c'est du javascript pur donc ça va marcher on va dire nativement sur tous les frameworks et
on va basculer après sur sur les animations pur mais là les trois que je vous ai présenté elles sont
elles sont vraiment agnostiques de tout framework vanille à gilet ouais vanille à exactement
malgré le fait que motion one a une petite surcouche qui est déjà fait en vue et en solide
solide forcément ouais ils ont fait le choix après je pense que c'est peut-être parce que
ils avaient des plus d'appétence en clair on va utiliser des directives qui sont directement
implémentés et on va dire ce framework va pardon la librairie motion va directement être intégrée
dans le framework avec des directives qui peuvent être utilisées directement dans nos composants
ce qui est beaucoup plus beaucoup plus facile ok donc ça c'est plutôt bien et avant de basculer sur
on va dire la vision réacte vue angulaire parce qu'il existe aussi des librairies qui sont qui
ont été codées pour angulaire et pour pour vue il ya un petit dernier qui est sorti aussi il ya pas
longtemps qui s'appelle auto animate et un gros avantage que je vois c'est bah déjà il est agnostique
donc réacte ou que vu directives svelte action en clair on peut l'utiliser un peu un peu partout et
on va juste lui dire tiens tu viens animer le parent et tous les enfants vont être auto automatiquement
animés un exemple typique là on voit sur je veux rajouter je veux rajouter où je veux réorganiser
avec les ordres un ordre 1 2 3 4 voilà je vais réorganiser les un li et bah en fait dans le
ul je vais dire auto animate et ça va automatiquement en fait déplacer les éléments en animation à la
suppression ça va ça va faire une espèce de fade et ça va rétrécir l'élément parent et ça va
automatiquement animer donc en une directive on va on va on va générer on va créer une animation
donc on va on va dire pour ceux qui veulent pas du tout du tout du tout coder une animation mais qui
veulent profiter d'une animation out of the box en js dans notre framework auto animate et juste
hallucinant parce que bah ça fait du motion out of the box quoi et plutôt super propre donc c'est
vraiment hyper ouais c'est un peu magique ouais alors je sais qu'il ya beaucoup de gens qui n'aime pas
la magie mais moi moi ce que je vois c'est le c'est la capacité la la velocité la rapidité dans
laquelle on peut implémenter ça et l'avoir un rendu visuel waouh toi c'est super super intéressant
je vais ajouter un client où je veux cliquer sur quelque chose le supprime bah il ya un petit
effet animation je viens déterminer ma durée enfin en trois lignes c'est fait et il ya un petit effet
waouh instantanément et donc ça c'est ça c'est plutôt oui oui c'est pas mal c'est plutôt c'est
pas mal du tout à tester c'est pas mal on va passer au librairie spécifique au framework
donc exactement celle d'avant c'était juste au js tu les intégrotes ou une page html
un framework n'importe là on passe vraiment sur des libres spécifiques réacte vu ou angula
exactement et je pense celle qui est la plus connue en réacte bah c'est framer motion je pense après
je sais pas si t'as déjà utilisé ou pas non non après je pense c'est pas mal utilisé sur
sur du réacte natif pour justement dans les animations téléphone pour se rapprocher au plus
proche de de l'effet natif en fait du téléphone sur lequel on n'a pas toujours accès sur les
app pays mais avec ça on va pouvoir intégrer des choses plutôt pas mal et là en fait on va
dans notre composant réacte on va déclarer et on va utiliser en fait les directives de motion
framer pour justement bah interagir directement donc là en fait on ne on rajoute on rajoute pas
un niveau d'abstraction autre on reste dans notre framework et c'est la librairie qui vient qui
vient framer on vient utiliser la syntaxe framer c'est le l'éditeur de c'est un système
c'est ça lié avec framer là le système qui exactement c'est totalement lié c'est totalement
lié en fait tu peux même exporter directement de framer ouais alors pour le coup et exactement ouais
tu vas tu vas pouvoir en fait tu vas coder tes enfin tu vas designer tes appliques tes animations
et derrière en fait bah tu vas pouvoir les intégrer directement dans dans ton appli réacte
d'accord ouais c'est peut-être pour ça que s'il est super connu parce que les designers doivent
faire les animations après les développeurs de les intégrer dans les projets réacte ouais
exactement après on avait parlé on avait déjà évoqué ça un peu avec avec charlie qui était
venu nous parler de l'auteaille mais pour le coup là c'était sous after effect quoi donc c'est
une animation ça chose ouais c'est le verre et là en fait avec framer bah c'est les animations
de de framer qu'on va pouvoir exporter donc intéressant après je sais pas si figma on va
pouvoir utiliser ça ou pas je sais pas si il y a des plugins peut-être ouais des mais en
tout cas gros ça gros libéré d'animation on va retrouver un peu la la même chose en motion
sur survu avec des hooks dans nos composants pour justement bah aller animer donc on va on va dire
c'est l'équivalence sur sur survu et on va déterminer on va définir et écrire nos animations
ok ça fait partie c'est un plugin de vue use qui est en fait une énorme bibliothèque de de hooks et
de composable en vue où on va pouvoir utiliser il y a un plugin qui vient se rajouter pour justement
gérer toutes toutes ces ces animations donc c'est c'est un peu c'est pas mal c'est pas mal et après
ce qu'il faut comprendre c'est que toutes ces animations là elles elles se mettent en place
ça reste encore récent et je pense que ça bouge énormément il ya il faut être plus c'est c'est
les techniques d'animation évolue mais super super vite ça vient de plus ça devient de
plus en plus complexe mais le rendu est de meilleur et de plus en plus de qualité donc il faut utiliser
ces ces techniques là pour pour faire pour faire des choses et animer et je pense qu'au demain on
y aura encore d'autres techniques qui vont venir se rajouter et ça va et ça va ça va évoluer
je vais juste parler très rapidement de alors c'était un pareille de star ouais voilà ça c'est
vue vue starport vue starport en clair c'est je vais garder un élément d'une page pour l'afficher
dans la deuxième page et sur cette route en fait parce que là je vais bien utiliser mon
routeur donc du passé d'une page à l'autre il ya un même élément et bah cette même élément en
fait va rester visuellement sur ma page donc j'ai un effet en fait comme si je naviguerai pas d'une
page à l'autre et c'est l'élément qui se ressaise automatiquement et donc ça fait un effet en
fait comme si on plongait en fait dans dans dans l'image où l'image se ressaisent et donc
c'est un effet visuel qui est super super classe après est-ce que c'est bien supporté encore je
pense pas par contre il ya une API qui justement on évoquait ça sur l'épisode de la google
point io 2020 où justement bientôt alors pour l'instant c'est derrière un flag mais justement
on va pouvoir interagir sur ce sur ce routeur API pour justement venir injecter des éléments si
il ya deux éléments qui sont présents dans la dans la page dans les deux pages et bah on va faire
on va pouvoir appliquer un effet sur sur ce routeur et sur la navigation du coup ça ouvre de
quand même de bonnes perspectives donc ça c'est vraiment les transitions de page pour pour faire
un effet pendant que la pays native n'est pas encore disponible parce qu'il travaille dessus
exactement pour l'instant on peut le faire on peut le faire avec les librairies on peut le faire
avec des librairies avec du green socks avec toutes les librairies qu'on a vu néanmoins ça
ça nécessite de vraiment vraiment bien maîtriser à la fois le routeur et à la fois la librairie
d'animation donc on attend vraiment que ça sorte en natif et on aura une des navigation entre les pages
qui sera d'autant plus fluide et d'autant plus sympa même si c'est déjà accessible via via
je sais pas mais ça ouais c'est la porte d'entrée pour le coup et et la marche d'entrée il ya vraiment
un step pour pour jouer avec ça c'est clair ouais ok pas mal tout ça mais ouais après une fois
de plus je pense que ben il faut jouer avec quoi en fait le seul moyen de vraiment comprendre comment
ça marche et comment on peut l'utiliser bah c'est de jouer avec ces librairies là peut être
commencer par des tout des tout petits effets assez simples avant de se lancer dans une grande
animation déjà de comprendre les fondamentaux peut-être de réagir au scroll ok au scroll ça
grandit et bah peut-être que ça ça suffit largement et ça nous ouvre des portes et puis
après on rajoute au fur et à mesure des de la complexité et ça c'est déjà hyper hyper
intéressant mais grosse dédicace quand même à matt péril on mettra le lien mais je suis hyper
emballé par cette notion de motion one aussi bien en termes de performance qu'en termes de rendu
en termes de fluidité ça me paraît super classe et personnellement j'aurais bien envie de pousser
sur motion one ouais ok et toujours attention on le rappelle attention aux performances au niveau
des animations on a parlé avec 3js on a parlé avec le css on en parle aujourd'hui avec le js attention
aux performances de vos animations parce que nous on code en tant que développeur sur des machines
assez puissantes mais n'oubliez pas qu'il y a des gens qui vont naviguer sur les sites avec des
machines beaucoup moins puissantes donc toujours tester avec des petits téléphones tout ça
pour être sûr que ça fonctionne correctement yes top merci patrick merci à toi pour tout ça
pour toutes ces explications c'était très intéressant et puis et puis ouais une fois de plus
en code on essaye allez go c'est cool allez merci à tout le monde ciao ciao
retrouver double slash sur la plateforme de podcast préféré et sur le site internet du podcast
3w.slash-podcast.fr sur le site vous allez retrouver tous les liens de l'épisode les références évoquées
durant l'émission