Bonjour à tous, bienvenue sur ce nouvel épisode de Double Slash.
Donc comme d'habitude, nous sommes avec Alex.
Salut Alex !
Salut tout le monde, salut Patrick !
Et aujourd'hui, nous sommes trois, on a un invité.
Salut Charlie !
Salut Patrick, salut Alex !
Donc petit rappel, vous avez possibilité, là, si vous nous écoutez en audio,
vous avez aussi la possibilité de regarder la vidéo en fait sur YouTube.
Le lien est en général avec les notes de l'émission.
Donc c'est plutôt agréable.
Surtout aujourd'hui, quand on va parler un petit peu d'animation, tout ça,
il y a peut-être des choses à voir.
Donc si jamais vous voulez voir un peu plus de choses en vidéo.
Et donc on va commencer.
Aujourd'hui, le sujet du jour, en fait, c'est l'autee.
Et bon, personnellement, je ne connais pas du tout.
Donc Charlie, déjà, on va te laisser te présenter.
Voilà ce que tu fais dans la vie, tu en background tout ça.
Et puis après, on va parler un peu de l'auti.
Yes, avec plaisir.
Donc comme je disais, en off.
J'ai fait le wagon.
Il y a pas mal de temps maintenant, je ne sais plus combien de temps exactement avec Alex.
Donc le wagon est une formation pour apprendre à coder.
Et ensuite, j'ai fait quasiment que du freelance à la suite de ça et monté quelques projets.
Donc principalement au début, en full stack, parce que c'est ce qu'on nous apprend au wagon.
Et je me suis réorienté ensuite sur du front end et sur du design.
Et dans un des projets que j'ai monté, l'auti, donc une technologie d'animation,
était le sujet de ce projet là.
Et je pense qu'on en parlera plus en détail pendant l'émission.
Mais oui, freelance front end depuis maintenant, c'est temps.
OK, très bien.
J'ai oublié de le dire au début.
Alors cet épisode, en fait, fait partie d'une petite série.
En fait, on va faire trois, quatre épisodes sur les animations au niveau du web.
Donc là, aujourd'hui, c'est l'auti.
Il y en aura un autre sur le CSS, un autre sur JavaScript et peut-être aussi un autre sur la 3D.
Donc, voilà, restez à l'écoute.
Il y aura une petite playlist disponible, une petite série d'animations qui sera disponible au fil de l'été.
Voilà. Donc, on démarre.
L'auti.
Alors à la limite, avant de plonger dans le coeur du sujet de l'auti,
aujourd'hui, ce qu'on peut dire, déjà, c'est que tous les sites Internet,
si on fait du site Internet en mode années 90 avec des GIF, des trucs comme ça,
on va vite être limité.
Et si on fait un truc full static où il n'y a pas d'animation,
la qualité perçue par l'utilisateur qui va venir visiter notre site,
on aura le sentiment d'avoir d'être sur un site un peu vieillot ou un peu triste.
Donc, l'idée, en fait, c'est de passer sur d'autres technologies qui nous permettent
de mettre un petit peu des animations et l'auti en fait partie.
Du coup, Charlie, est-ce que tu peux nous expliquer, en fait,
c'est quoi le concept de l'auti et à quoi ça sert ?
Alors, oui, bien sûr.
Alors l'auti, c'est une technologie qui a été développée par Airbnb.
Il y a 50 sites, je dirais, peut-être un peu plus.
Et qui permet de faciliter l'intégration d'animation dans des sites web,
parce que comme on le sait tous en tant que développeur,
faire une animation custom en partant 0 avec du SVG ou d'animandédive ou ce genre de choses-là,
ça prend un temps incroyable et c'est très dur à faire.
Et souvent, c'est la chose qu'on fait en dernier,
qui n'a pas trop de valeur à ajouter, mais qu'il faut faire quand même.
Donc l'auti, ils ont fait ce Airbnb à la base qui a fait ça,
et ils ont fait le pari de le dire, on va laisser le travail d'animation à des designers,
donc l'auti, ça commence par un designer qui fait ça dans After Effects.
Donc je ne sais pas si vous connaissez After Effects,
mais c'est là de suite à Adobe pour faire des animations et du motion design,
ce genre de choses-là.
Donc ça commence de cette étape-là,
donc un motion designer qui fait une animation dans After Effects,
qui l'exporte en fichier JSON via un plugin qui s'appelle Body Moving,
je crois, de mémoire, mais je ne connais pas After Effects,
mais bref, il y a une étape d'export de After Effects à fichier JSON,
qui est donc le format l'auti.
Et ensuite, ce fichier JSON peut être lu et joué dans le navigateur
ou d'autres plateformes d'ailleurs comme iOS, Android ou...
Toutes les plateformes web en général via le plugin JS, l'auti,
qui faut installer, donc c'est un ordre module sous un package à installer,
et ensuite on peut charger le JSON et le jouer dans le navigateur.
Très simplement, c'est-à-dire en une heure,
on peut avoir une animation qui tourne très complexe,
alors que s'il fallait la faire à la main,
ça prendrait probablement une semaine ou jamais,
parce qu'il y a des choses qui sont tellement poussées
que c'est impossible à faire à la main sans aucune technologie.
Mais par contre, on vient de déplacer le problème,
c'est-à-dire que c'est le designer qui est en charge de faire son animation.
Par contre, juste en termes de taille ou de spect,
il faut que lui, il ait la taille ou c'est resizable ou des choses comme...
Tu vois la question ?
C'est une très bonne question et c'est un des avantages que l'auti A,
je trouve, c'est que une fois que c'est transformé par le plugin l'auti dans un navigateur,
c'est du SVG, donc ça a théoriquement n'importe quel taille,
c'est du vecteur, ça peut avoir n'importe quel taille,
et ça s'adapte à une div, et cette div-lan,
on peut la dimensionner en CSS comme on veut,
donc un peu faire 200 pixels ou 2 millions de pixels en théorie,
et l'animation va se stretch en fonction de la taille de ce container.
Ça s'adapte au container.
Exactement, donc c'est responsif par défaut et ça c'est aussi un autre gros avantage
parce que si on veut faire des animations vidéo responsibles,
il faut en faire 3 ou 5 ou 10 pour tous les écrans.
Et là, l'auti on en fait une seule,
et puis automatiquement quand la div se change de taille,
l'animation reste dans la div, et ça c'est assez incroyable aussi pour les animations.
Je trouve.
Par contre, After Effect est un passage obligatoire,
il n'y a pas d'autres systèmes peut-être qui existent ou non ?
Pour l'instant ?
Alors, After Effect, c'est si on veut faire une animation custom,

Tout comme si tu veux faire une photo custom, tu passes par un photographeur,
entre guillemets, sinon il y a la partie, tu prends quelque chose de générique,
donc sur l'auti files, qu'on montrait au début avant l'émission,
et donc une banque de JSON en format l'auti qui sont déjà prêts,
que tu peux charger et jouer.
C'est un peu le pixel,
ou je ne sais pas si ça fait longtemps que j'utilise plus ces services-là,
mais bon, c'est une banque de fichiers déjà prêts.
Les nsplash, nsplash, pixel, tout ça.
C'est l'équivalent pour l'auti.
Alors, ils font peut-être d'autres choses que je ne connais pas exactement,
parce que ça existe depuis pas mal de temps maintenant,
mais en gros, ce que tu vois là, c'est des fichiers de l'auti
que tu peux télécharger et intégrer dans ton site.
Et en fait, finalement, l'animation complète se trouve dans le JSON ou...
Il y a autre chose avec...
Non, tout est dans le JSON.
Alors, j'avais essayé de décortiquer un petit peu.
C'est une sorte d'énorme fichier avec plein coordonnées
et des coordonnées vectorielles que je comprends très basiquement,
mais bon bref, c'est leur langage à eux.
Et ensuite, le plugin fait tout le travail de rendering,
donc d'affichage et de coloriage et de positionnement du SVG dans l'aligateur.
Donc, c'est le gros avantage, c'est qu'il faut avoir quelqu'un qui saut faire du l'auti,
mais une fois que c'est fait, le travail est fait, il n'y a plus qu'à l'animer et le placer.
Oui, en fait, c'est assez énorme,
parce que ça va créer le SVG en fonction du JSON,
ça va créer l'animation aussi avec les couleurs.
En fait, ça fait tout, tout est dans le JSON et tu...
Exactement.
La source de vérité, comme on dit, plus le reste.
Par contre, la grosse difficulté, c'est l'usage de After Effects, on va dire,
mais pour quelqu'un qui fait du motion design, c'est son outil au quotidien
et il a un contrôle parfait sur sa timeline avec ses points et tout,
qui sont beaucoup plus faciles et ergonomiques à utiliser sur un logiciel de montage qui est dédié à ça.
Par contre, je vois qu'il y a une énorme différence de poids aussi, c'est un critère important.
Oui, le fichier JSON, il fait souvent quelques dizaines ou centaines de kilos
vers une vidéo qui peut faire facilement un méga, voire plusieurs méga.
Donc, si on compare l'outil à des fichiers vidéo, c'est beaucoup plus facile à charger.
Ce qui ne veut pas dire que c'est plus facile pour le navigateur,
parce qu'il y a beaucoup de calculs qui sont faits pour le rendering du lotil,
justement, en SVG, ça peut faire beaucoup de calculs.
Je me rappelle quand on bossait sur le développement de l'outil studio,
j'avais un ordinateur qui était un peu vieux à l'époque,
et ça m'arrivait souvent de faire que le ventilateur se mette en route au bout de 30 secondes ou 45 secondes,
parce que c'est des calculs qui sont font en réel d'animation du SVG.
Donc, ça demande beaucoup de ressources de processeurs pour la faire tourner,
mais c'est beaucoup plus léger à charger qu'une vidéo,
parce que c'est juste un fichier JSON au final.
Et du coup, est-ce que toutes mes animations vont avoir le même rendu sur tous mes devices
et sur toutes mes machines, ou justement, je dois adapter quelque peu pour quel tel type de device ?
Sur le site lotil studio, je n'ai pas souvenir qu'on n'a qu'un seul fichier JSON
pour toutes les tailles.
Donc après, ça dépend des besoins.
Si tu vas avoir une animation différente sur mobile, tu peux le faire aussi.
Mais vu que c'est responsable par défaut, l'animation va être là, même rendu et même couleur, même tout,
quelque soit le device.
Je sais que même les gens avec qui je bossais sur le lotil studio,
ils font des animations pour des montres connectées.
Donc, vu que c'est du SVG, tu prends une animation déjà faite,
ça va s'adapter à la taille de la montre et ça marche.
Out of the box, excellent.
Et par contre, est-ce que tu as une limitation sur les devices ?
Par exemple, tu parlais tout à l'heure de processeurs ou des choses comme ça,
est-ce que tu vas avoir vraiment, tu vas déjà pouvoir toucher la limite du device
ou même si ça va, ça va être de ronfler un petit peu, mais ça va toujours passer ?
Oui, ça va passer.
Mais par exemple, le lotilstudio.com, si tu le fais tourner sur un andi de 2015
ou un truc un peu vieux, c'est sûr que ça va déclencher le ventilateur.
Ok.
J'ai jamais eu le cas ou...
Mais pourquoi ? Parce qu'il y a plusieurs animations sur la page, la page, la home qu'on voit là ?
Là, sur celle que tu vois, il me semble qu'il y en a deux de mémoire.
Tu as la voiture en haut et en dessous tu as le kilométrage avec le boost, ça c'est deux animations différentes.
D'accord.
Et après, plus tu charges, on avait fait du lazy loading, donc plus tu descends, plus ça charge les animations.
Mais le chargement encore, ce n'est pas la partie compliquée, c'est quand il commence à les jouer,
où là il doit calculer plein de coordonnées en temps réel, c'est le navigateur qui fait plein de calculs.
Donc au final, c'est le processeur.
Donc...
Et ça peut être assez lourd.
Donc il faut être assez prudent en fait,
parce que si tu es destiné à des devices mobiles ou des choses comme ça, peut-être un peu anciens avec de l'android ou des choses comme ça,
tu peux peut-être faire exploser un petit peu le téléphone.
Ouais, ouais, tu peux faire un peu d'un 10% de batterie en quelques minutes.
Tu n'es pas peur au visiteur.
Ouais, non, non, c'est ça.
C'est à utiliser.
Bon là, sur le site, on a mis plein, parce que c'était un site de vitrine, on voulait montrer les possibilités,
mais souvent, je sais que je crois que Harvey M. Lee s'en sert pour quelques animations en la fin,
quand t'as fait une reservation, les étoiles qui bougent.
C'est assez léger comme utilisation dont on a vraiment mis une grosse tartine,
parce qu'on voulait montrer ce qu'on voulait faire avec.
Bien sûr.
Normalement, c'est plus léger.
Et par contre, est-ce que...
En fait, quelle est la bonne taille d'animation sur laquelle ça va être intéressant de faire du loti?
Je m'explique, peut-être pour faire juste un spinner,
le CSS va être suffisant et totalement va se suffire à lui-même.
Et à quel moment, en fait, c'est intéressant de passer sur After Effects pour faire un export en loti justement?
Est-ce que c'est facile à calibrer, à tel point, je vais passer sur tel techno?
Ouais, pour moi, ce n'est pas tellement une question de ressource,
c'est une question de complexité d'animation.
Parce qu'aujourd'hui, avec les ordinateurs, les processus M1 et les nouveaux iPhone,
on est moins en moins limité par les ressources, je trouve en tout cas.
Après, il y a plein d'androïdes évidemment qui sont encore très vieux et plus basiques.
Mais c'est plus une question de qu'est-ce que je veux faire.
Donc pour un spinner, évidemment, en CSS, tu peux faire ça assez rapidement.
Mais je crois que sur le site de la documentation loti,
il y a même des exemples de choses qui sont assez simples.
Non, peut-être pas sur ce site-là, je ne sais plus où c'était.
Un menu hamburger qui, avec une animation un peu sympa,
ça peut prendre deux jours à faire en dev,
alors que si on a le pichier loti, ça fait en 20 secondes.
Donc pour moi, c'est plus une question de compromis que,
comment ça va prendre en dev versus quand même, ça va prendre d'intégrer un loti.
Donc c'est plus ça, mais oui, le curseur, c'est là où je le mets.
Là, je rebondis parce que tu parles de boutons en fait.
Ça veut dire que ton animation, tu peux la déclencher un événement,
par exemple un clic ou un truc comme ça, quand tu veux faire un burger qui bouge dans tous les sens.
Ça marche comme ça.
Exactement, oui.
Vu que c'est un des gros avantages aussi de loti, c'est que c'est exporté.
L'export final, c'est un pichier asdg.
Donc dans le navigateur, c'est du HTML.
Et du HTML, tu peux faire un correil selector pour lui accéder
et ensuite, tu peux faire ce que tu veux avec.
Donc tu peux déclencher l'animation en clic, tu peux l'arrêter,
tu peux la boucler, tu peux la segmenter, tu peux l'accélérer.
Ah, donc tu as accès à une sorte d'API comme une vidéo,
tu plays, stalk, pause.
Oui, d'accord.
Tu as accès à l'API du navigateur déjà, donc tu peux faire plein de choses avec,
quasiment tout et tu as aussi accès à l'API de la librairie loti
qui est beaucoup plus limité, mais qui peut te permettre
comme une vidéo comme qui tu peux jouer, arrêter,
ralentir, boucler une partie.
Ah ouais, donc en fait, ça voudrait dire que limite,
on pourrait faire, en fait, rendre l'animation vivante au scroll
ou aux choses comme ça, pour animer,
selon tous les événements de ton navigateur.
Donc over, scroll, on page, off page.
Et là, on rebasculent sur du pur JavaScript.
C'est correct.
Ok.
Donc en fait, c'est vraiment la croisée des mondes
entre le pur design créatif
et l'interaction possible
du développeur.
Oui, c'est exactement ça.
Et puis d'ailleurs, sur le site de Lotis Studio,
on a fait pas mal de optimisations
qu'on ne voit pas vraiment quand on s'en sert,
mais par exemple, je crois que de mémoire,
je crois qu'on arrête de jouer les Lotis
quand ils sortent de la page
pour justement sauvegarder un peu de processeurs.
Ok.
Et sur le chargement de la page,
on ne charge que les Lotis que quand ils arrivent
dans le viewport, pour pas charger des ressources.
Oui, tu veux dire, quand on change d'anglais,
en fait, vous arrêtez les animations.
Oui, même quand ils sortent de l'écran.
Ah oui, tu vois pas,
parce que c'est le but, c'est que tu ne le vois pas.
Il me semble qu'on l'avait fait
et ça, il y a quelques années,
je ne me rappelle plus de toi exactement, mais...
D'accord. Ok.
Mais ouais, c'était ça l'idée, ouais.
Donc, tu as accès à tout le lapis de l'inigateur,
plus la paye Lotis, pour faire ce que tu veux
avec ton animation.
Et ça, c'est assez énorme,
parce qu'une vidéo, tu ne pourras jamais faire autant de choses.
Oui, carrément.
Et quand on revient sur Lotifal,
ce qui est un petit peu
la bibliothèque un peu libre,
là, on voit plein de logos qu'on connaît tous,
des dessins, des animations,
des XD, des figmas,
VS Code, Android, Apple, tout ça.
Ok.
Par contre,
est-ce qu'il y a
des grosses bibliothèques?
Est-ce qu'aujourd'hui, il y a une grosse communauté
qui a utilisé ça,
qui utilise ça?
Est-ce que c'est des fichiers
qui sont open source,
ou ils sont brandés et propriétaires?
Alors, il me semble
que tu as dit tout à l'heure que c'était
Airbnb qui a lancé le
type de fichier.
Est-ce qu'aujourd'hui, c'est totalement
drive-by
par la communauté ou pas?
Je n'ai pas trop la réponse
à cette question-là, parce que ça fait longtemps
qu'on ne s'en sert plus trop.
On développe plus activement le projet.
En tout cas, je sais que c'est open source.
Ok.
Donc, tout le monde peut y contribuer.
Je ne sais pas à quel point les gens y contribuent,
mais le projet est open source.
Et
si je veux chercher
n'importe quelle animation,
je vais justement sur Lottifiled.
Et là, je vais avoir
tout ce que je veux, je télécharge.
Je vais implémenter directement
dans mon render,
enfin, dans mon
dans mon application front.
Et c'est parti, quoi.
C'est parti.
Il y a un truc qui est assez cool aussi,
dans Lottifiled,
c'est encore une fois que du SVG.
Par exemple,
le menu hamburger bleu que tu veux en rouge,
tu peux très bien dire, une fois qu'il est chargé,
dans le navigateur, avant de le jouer,
je change la couleur en ce que je veux.
Donc, tu peux l'avoir brandé.
Ok.
Donc, en fait, tu vas avoir
un travail du designer,
mais au final,
le développeur, à la fin,
comme il a la main
sur ce gros fichier là
et que c'est
du SVG, il va pouvoir interagir
et donc modifier
peut-être des informations, quoi.
Exactement.
Souvent des couleurs ou du texte.
Ce qui n'est pas le but,
mais par exemple, quand tu prends un fichier qui est déjà fait,
vu que si tu voulais changer le JSON,
je pense que tu pourrais le faire
si tu étais un peu hacker, mais bon,
si tu voulais modifier le JSON
sans avoir accès à After Effects,
tu pourrais essayer de trouver un code couleur et le changer,
mais tu verras peut-être de casser le JSON
et de complètement foirer ton animation.
Donc, tu peux le faire une fois que le JSON
est converti en SVG, tu peux le faire
à post-arriori dans le navigateur et dire
ok, je voulais mon
cette couleur là en rouge, parce que c'est la couleur de mon site
et c'est terminé, tu vois.
Ce qui n'est pas la...
Je ne recommande pas de le faire, si on veut
utiliser un fichier existant
et le tweaking un peu pour le mettre
à la sauce, on peut le faire, parce qu'encore une fois,
c'est du SVG et du HTML.
Par contre,
à utiliser aussi avec
la limite, parce que sinon,
le risque c'est qu'on pète tout
et on
crée un truc qui est immaintenable
et avec une impossibilité de faire
des évolutions futures.
Oui, c'est ça, c'est juste un petit truc de hacker.
J'ai une question,
parce qu'on parle d'il est SVG, c'est plus léger,
et tout ça, mais la librairie,
l'auti, est-ce qu'elle est...
Tu sais, le JS inclut.
De mémoire, je pense que ce sera
se trouver sur
leur documentation ou sur NPM,
de y avoir l'info.
C'est le lecteur, tu dis Patrick.
Non, la librairie
JS qui permet de lire le G-zone
et d'animer tout le truc.
Parce que je vois des burgers,
je me dis, c'est trop cool, les burgers,
tu peux faire un truc qui bouge et tout,
mais je me dis, est-ce que le truc est pas trop lourd,
juste pour un burger menu, tu vois.
C'est une bonne question.
Je sais plus combien elle perd la librairie.
Je pense qu'on va aller voir sur NPM,
si tu veux l'info.
Parce que là, t'as surtout la partie iOS,
sur le truc de Github, je crois.
Je crois que ça s'appelle juste l'auti,
il me semble.
L'auti.
Oui, on a su.
Alors ?
Oui, on n'a pas trop l'info.
Oui, c'est un truc que je vais regarder.
Mais en même temps,
je pense que ça sera toujours moins lourd.
Parce qu'une fois que tu as ton moteur de rendu,
on va dire, avec qui est installé,
tu vas lui injecter le fichier de configuration.
Ce que j'ai compris, c'est le Grog-Githun,
c'est un peu la config,
mais sauf que ton client l'auti,
tu peux l'avoir partout sur ton site,
tu vas utiliser le même.
C'est la même instance,
c'est la même instance que tu vas réutiliser,
le même moteur que tu vas utiliser pour chaque anime,
où chaque anime en fait,
doit porter l'instance du lecteur.
Non, tu charges le lecteur une seule fois.
Et après, tu peux créer des instances du lecteur
pour chaque animation.
J'ai l'impression.
237,8 kg.
Il est trop fort.
Il est trop, trop fort, Patrick.
Peut-être que pour juste animer un burger,
c'est peut-être un peu trop.
Ouais, ouais, ouais, probablement.
Ouais, après,
ce que je pense que quand tu commences
à jouer avec ça,
tu ne fais pas que des menus burgers,
tu dois aller sur beaucoup
des choses un petit peu plus poussées.
Ouais, c'est cool.
Donc après, je pense que
c'est...
Est-ce que tu as des industries qui...
Est-ce que tu sais s'il y a déjà des industries
qui l'ont déjà adopté massivement,
ben bon, RBNB, oui.
Mais je ne sais pas,
par exemple, dans la tech,
ou pour des explications,
dans l'enseignement,
dans l'éducation, en fait,
pour faire des schémas,
ou alors, si il y a du motion design,
bah en fait, c'est du loti.
Ouais, alors,
je t'avoue que l'auti-studio,
on n'a plus trop bossé dessus depuis
quelques années, parce qu'on l'a lancé pendant le Covid
et pour plein de raisons, ça n'a pas
marché, autant qu'on l'aurait voulu,
mais je sais que
c'est beaucoup les
avances de...
de pub, du coup, qui font
tous les banners et se changent là sur Internet.
Parce que c'est plus léger à animer,
et du coup, c'est plus...
c'est plus performant et c'est plus
rentable probablement de faire du loti,
que de mettre des vidéos ou des...
des animations.
Donc, du coup, c'est plutôt pour de la pub ou c'est...
Tu peux tout faire avec, hein.
Tu fais une animation, tu peux tout faire avec.
Parce que ces gens-là, on...
ont vu l'avantage, la rentabilité probablement
du format et donc,
l'on adopté, mais tu peux...
tu peux tout faire avec.
Ok, je comprends.
Et donc, en fait, c'est genre d'animation
que je suis en train, qui est sur le site de Asura,
par exemple, qui a pour but,
en fait, d'expliquer le...
le fonctionnement d'une...
d'une technologie. Ils ont fait
du motion design.
Il y a fort appareil, en fait, que c'est...
c'est du loti.
Bah, c'est une bonne question.
Je ne connaissais pas le site, donc faudrait...
faudrait inspecter la page, mais c'est possible
que ce soit du loti, ouais.
Ok. Parce que, ouais, je vois
pour... il y a beaucoup, beaucoup
de sites Internet pour...
Alors, nous, on est dev, donc on utilise beaucoup
des services, mais
il y a beaucoup de pages Internet
sur justement la présentation de ces services.
Ouais. Ou en fait, avec un...
un motion design très, très simple,
bah, on arrive à comprendre
facilement
l'objectif du... du service.
Donc, ça pourra... ça a une grosse vocation
pédagogique. Et donc, en fait,
c'est grâce à... à l'auti qu'ils arriveraient
à faire des animations complexes
rendues dans notre navigateur, quoi.
Exactement, ouais. Après, ils peuvent
aussi l'exporter en vidéo, si vous voulez.
Sauf que ça prendrait beaucoup
plus de...
de ressources, enfin, ça s'est plus long
à charger. Mais After Effects
permet d'exporter en loti.
Et donc, ouais, d'avoir
un truc plus performant.
Excellent. Ok. Ok.
Et...
si... est-ce que
tu considères que un dev
va pas pouvoir se faire du loti
ou il va... alors, en fait,
non, je reformise ma question.
Est-ce que ça va être difficile
pour un dev, en fait, de se mettre
au motion design sur After Effects, si, par exemple,
je veux juste faire mon animation de mon petit burger,
est-ce que la...
la courbe d'apprentissage est vraiment violente,
où j'ai meilleur temps
d'utiliser des...
des fichiers déjà en place
que je vais twequer un petit peu ?
Ouais, je pense que c'est la deuxième option,
parce que quand je voyais le...
le travail du motion designer avec
qui on travaillait, c'était...
ça pouvait être des...
pour le coup, c'est eux qui passaient des semaines
sur un truc qui était ridicule en tant qu'rendu.
Donc,
j'ai même pas... j'ai vu ce que j'ai usé, je connais pas
After Effects et j'ai même pas envie d'essayer
de comprendre parce que c'est un monde complètement à pas.
Mais ouais, si c'est
pour faire un burger qui saute
et qui fait un smiley, il vaut mieux prendre un truc
qui existe déjà et de... changer la couleur
plutôt que d'essayer de comprendre After Effects.
Enfin, c'est mon point de vue qui n'est... moi,
qui n'est jamais essayé ou touché After Effects,
je pense que c'est un monde... un monde à part
qui n'est même pas du web, d'ailleurs,
ça fait pour faire plein de choses, du motion,
de la télé, du cinéma, donc c'est encore un autre...
un autre monde qui m'échappe.
Donc, mon point de vue,
c'est... France qui existe
déjà.
Bien sûr, bien sûr.
Et aujourd'hui, tous les motion designers
sont plutôt...
coutumiers et ils ont l'habitude
d'utiliser ce type d'exports
ou pas.
C'est une bonne question. Je pense que c'est
encore quelque chose qui est assez niche,
parce que comme je te l'ai disais, le motion designer
s'utilise beaucoup pour de la télé aussi
et des formats plus anciens, et l'auti
c'est quelque chose de très nouveau par rapport
à ces formats-là. Donc, je pense
que c'est encore, oui, encore un truc assez niche
et...
Ouais.
Ce n'est pas connu de tous les motion designers, je pense.
Mais encore une fois, je ne suis pas motion designer et j'en connais quelques ans
parmi l'immensité
de motion designers.
Après, il y a
aussi sans doute
une niche
à prendre chez eux, justement,
pour faire des exports spécifiques
pour le web.
Et est-ce que
justement...
Alors peut-être que tu ne vas peut-être pas avoir
la réponse, mais est-ce que un motion designer
qui n'a jamais exporté
en l'auti, c'est
plutôt compliqué ou pas du tout?
Alors, il me semble
que Andre, qui était le nom de la personne
avec qui on travaillait, me disait qu'il y avait
des subtilités à prendre en compte quand on
exportait
en l'auti. Il y avait des choses qu'on pouvait
faire dans After Effects
qui n'étaient pas possibles de faire.
Enfin, qui n'étaient pas exportables en l'auti.
Ok. Notamment des 3D
ou ça pouvait être des... pas pas des 3D, mais plus
des...
des ombres, des chadeaux, des... bref, il y avait des subtilités
qui passaient dans After Effects et qui passaient très bien pour d'autres formats
mais qui en l'auti ne se...
ne se traduisaient pas en l'auti
parce que le plugin n'était pas encore assez puissant.
Ok.
Donc il y a des... il y a des petites choses
que je connais très mal, mais il y a des... ouais.
Peut-être c'était pas compatible web en fait, peut-être.
Oui. Oui, c'est ça, ouais.
Peut-être, ouais, il y a des trucs comme ça.
Par contre, une fois qu'on a
l'export en l'auti,
là on est... on peut garantir
le rendu
et la sortie va être identique
que quelle que soit le device
et quelle que soit l'écran
ou l'OS ou tout ça, quoi.
Là, c'est... une fois que c'est sorti,
c'est... c'est carrément stable.
Ok.
Est-ce que...
si... si moi, demain,
je veux... je veux interagir avec ça,
je veux commencer à mettre des animations
par quoi tu nous conseillerais
de commencer?
After Effects.
Tu veux bien pour jouer, pour... pour faire...
pour utiliser, par exemple,
je me rends sur...
sur l'auti files.
Là, je vois...
Allez, je vais prendre un truc populaire.
Là, je vois le petit
vélo avec qui... Le petit vélo.
Le petit vélo, c'est bien parce que nous, on est fans de vélo
avec Patrick.
Là, je peux... sur l'auti file,
on voit qu'on peut déjà un petit peu
customiser
l'animation.
On peut changer le background, on peut
mettre un peu plus de vitesse.
On peut même...
mettre une palette de...
de couleurs pour que ça résonne,
pourquoi pas.
Là, après, je fais mon...
je fais mon export, donc je vais
télécharger...
je vais télécharger,
et je vois que là, je peux directement
le mettre en...
en fait, je peux télécharger
directement et il est... le fichier,
il est embedded sur
l'auti files,
ou je dois le mettre sur mon ordinateur.
Tu peux faire les deux.
Tu peux soit avoir un fichier local ou distant
pour charger ton l'auti.
Ça, c'est cool. Et une fois que tu as
t'en fiché JSON,
il faut donc charger la librairie l'auti web
via NPM, Insta,
ou alors directement mettre le lien
dans ton script.
Et ensuite, il y a une petite configuration
à faire de dire,
je veux que l'auti soit attaché à 7 divs
de mon... de ma page,
et que je le lance à tel moment.
Et ça, c'est le plus... le plus basique.
Mais t'as tout, regarde. T'as même un...
un short code et tout.
Ah, mais voilà, il tenait pour charger.
Mais vas-y, fais-le en live pour voir.
Allez, live déo.
Non, non, non, non, je sais pas.
J'ai pas de machine qui tourne, mais dans l'idée, en fait,
c'est je récupère le script sur un...
sur un CDN, et je viens
injecter une balise qui est un l'auti player,
dans lequel j'ai mis
ma source du JSON,
et après des... des informations
qui sont en plus intelligibles,
facile, quoi. J'ai un attribut
background, un attribut speed,
et un attribut style,
loop, loop control, auto-play.
Donc, je suppose que
si je viens modifier le speed
à 2, bah après, c'est
un attribut classique qui peut être bindé,
si on utilise un framework, ou des choses comme ça.
Donc, ouais,
limite, j'ai même pas besoin
d'installer
le... le...
le package npm.
Si vraiment, je veux faire un truc ultra simple,
je peux animer déjà
en allant récupérer
via le CDN, quoi.
Là, je me demande si l'auti player,
c'est pas le player qu'on voit avec le...
tu vois la timeline et tout, peut-être c'est ça,
l'auti player. C'est peut-être pas vraiment le truc
sans... sans le...
le play. Je... ouais, je sais pas.
Il faudra essayer.
Ouais, par contre, moi, ce que je vois, c'est
que...
instantanément, on peut utiliser
déjà des... des outils comme ça
très, très, très, très rapidement,
quoi. C'est puissant, ouais.
Ouais, carrément,
c'est... ouais, en vingt secondes,
tu peux avoir un truc qui tourne,
avec une configuration basique.
Donc, si tu as un motion designer sous la main,
tu peux faire des trucs de ouf, quoi.
Ouais, après...
Ouais, voilà, après, les... les motion...
qui va pouvoir utiliser, et qui a
des motion designers sous la main,
ouais, c'est déjà une agence
qui est structurée. Par contre,
je pense que c'est... c'est
largement possible aussi, sur
une boîte, une boîte qui décide
de refaire son site Internet,
et qui veut une superbelle animation,
pour justement expliquer
l'usage,
de faire appel sur un
one shot, sur un motion designer
qui vient justement créer
l'animation
et le rendu qu'on veut,
et derrière, on l'intègre directement
dans notre site Internet, et c'est
responsif. Donc,
vu que c'est une demande, enfin,
vu que c'est une...
une spécificité qui demande des compétences,
parce que, after effect, fin, c'est...
c'est une usine à gaz.
Donc, c'est... c'est trop spécifique.
Par contre,
le fait de... de... de mettre
un...
un fichier HGson
dans notre site Internet, ça, je pense
que n'importe quel dev va pouvoir y arriver.
Donc, c'est là où c'est... c'est...
c'est super intéressant.
Ok.
À la limite, ce qu'il faut
faire, c'est toujours pareil. C'est peut-être
déjà commencé par la doc.
Il y a... la doc
de Airbnb. C'est un... c'est un bon début.
Ouais, c'est un bon début. Après,
je me rappelle de mémoire qu'elle était
assez...
euh...
comment dire, qu'elle était assez simple.
Un peu même trop simple à mon goût.
Ok.
Elle est vite limitée.
Ouais, euh... il te donne des noms de fonctions,
sachant que tu sais pas trop
ce que ça fait tout le temps, et il y a
parfois des références after effect,
où ils te disent genre, un truc s'appelle
play segment. Il faut comprendre ce que c'est un segment.
Bon, c'est assez facile à comprendre une fois qu'on a
posé la question à la personne
after effect, mais il y a des... ouais,
il y a quelques notions after effect,
je me rappelle. Il fallait comprendre pour...
Ouais, mais...
Ouais, donc en fait, ce que je comprends
c'est que l'autifize
il est plus à destination...
enfin, non. L'autifize, c'est pour
les développeurs pour récupérer
nos animations toutes prêtes.
Par contre, si on veut lire la doc,
euh... c'est plus
justement à destination des designers
ou des motion designers qui vont
utiliser ce type d'animation-là
pour que les exports soient
compatibles au moment
de l'export, quoi. Ok.
Ouais, ouais. La partie web,
en bas à gauche, t'as un petit onglet web
où je pense que tu dois avoir...
voilà, c'est ça. Alors du coup,
c'est plus body moving, maintenant, c'est ça
le... l'autime. Alors, ça,
c'est plus que c'est body moving. Ben, elle est pas
jour, en fait, la doc. Ouais, c'est ça.
La doc, elle était déjà à l'époque, elle était pas
forcément incroyable, donc il fallait
avoir un airbier.
Après, il y a
l'auti web,
et je pense que c'est peut-être
l'auti web...
En fait, il y a
différents scripts, il y a différents...
Ouais, il y a des CDN de body moving
et des...
Ouais, après...
de l'auti web. Bon, après...
T'as des parames comme les trucs 3DJS,
ça, ouais.
Après, je suppose que tu doy
avoir... le web doit regorger
de tutos ou des choses
comme ça pour te former, non ?
Ce que vous, vous avez fait comment pour
monter un compétence là-dessus ?
Ben, c'était beaucoup de...
de décès et d'erreurs qu'on a
fait à l'époque.
Là, ce que tu vois là, c'est à peu près tout ce
qu'il y avait à l'époque, c'était il y a 3 ans.
Et ça a pas bougé. Je sais pas
s'il y a plus d'infos, mais je me rappelle qu'il y a pas
masse d'infos à l'époque. Donc, par exemple,
tu as PlaySegment, comme je disais, ça à
l'époque, je sais pas que ça voulait dire,
7 subframes, il y a plein de trucs que j'ai fait des tests,
et c'est de tordre un peu l'outil, voir ce qui se passait
dans le navigateur. Mais globalement,
ta Play, Stop, Pause, c'est un peu les
trucs, les 3 trucs dont t'as besoin, le reste
c'est des...
des usages un peu plus avancés, mais
souvent, tu veux juste le la jouer
et l'arrêter quand...
quand la page est... avec ses scrollés,
c'est souvent...
Et là, t'as le fichier de config de base,
où tu dis le container, c'est l'élément
sur quel élément HTML tu veux acheter
ton animation,
le rendu de SPG, où t'as aussi
Canva, je crois, mais moi je prends
un SPG de base,
si tu veux le faire autoplay, si tu veux le faire boucler,
et puis après le reste,
c'est de l'avancer, mais globalement
tu as tout...
en extra-premier
propriété.
Bien sûr. Et puis après, de toute façon,
on va retrouver le style, on va dire,
classique, avec largeur,
hauteur, opacité,
et on va pouvoir
les binder si on a besoin
de le rendre un petit peu plus
réactif, avec du
JS classique. Par contre, ce qui est super bien,
c'est que ça... c'est que ça
autoscale, enfin, ça... c'est responsif,
quoi, et ça, c'est... c'est ouf.
Ça, c'est énorme, ça c'est énorme.
Alors, par exemple,
en discutais, je regardais, parce que dans
les sponsors, en fait, t'as un truc qui s'appelle
l'OTIS, l'OTILAB,
tu vois, sur le site, sur la doc,
et il semblerait que ça soit...
tu vois, sur la doc, là, dans les sponsors
chip,
l'OTILAB, je crois, ou un tout comme ça,
et en fait, il semblerait que...
voilà.
Ça soit un truc pour éditer, en fait,
des fichiers, tu vois,
created, ship, animation.
J'ai l'impression que c'est une sorte d'éditeur en ligne.
Ah, nice.
Et donc, c'était là qui est
son suivant, c'est est-ce qu'on est obligé,
est-ce que c'est le passage obligatoire
de passer par After Effects,
où justement, aujourd'hui,
il y a un écosystème qui s'est mis en place
pour faire des trucs un petit peu plus
léger et plus accessible,
et au final,
l'OTILAB
semble être un petit peu plus là-dedans.
Excellent.
C'est pas mal.
Bah, écoute, c'est vrai que l'OTIS,
ça source à génial, mais alors le
passage, le truc à l'entrée
de After Effects, c'est cette
bloc direct, en fait, tu peux pas...
Bah, pour nous, on t'en g'dève, quoi.
C'est un barrière, quoi.
Par contre, si il y a des trucs en ligne,
parce que je vois que maintenant, enfin,
ils font des choses de ouf en ligne,
tu prends Figma ou n'importe quoi, tu vois,
c'est hyper puissant,
et ça pourrait très bien exister pour animer
des SVG, tout ça, et après, t'exportes, enfin,
ça m'étonne que ça existe pas, en fait.
Enfin, là, j'ai l'impression que c'est un peu ça,
le L'OTILAB, mais...
Après, c'est
Get Early Access.
Je sais...
Depuis quand il en est Early Access ?
Si c'est comme la doc, il y a un peu mal.
J'ai plus de 1800.
Ça fait...
Ça fait des années qu'il est un Web Designer,
non, je suis pas designer.
On va...
Mais ouais, je connaissais pas, bah c'est...
Ouais, c'est cool, en tout cas.
Ça a l'air beaucoup plus simple que After Effects.
Ouais.
C'est une sorte de figment...
Ouais, parce que si tu veux faire des animations, ça,
t'as pas forcément besoin d'After Effects.
Des fois, tu veux juste animer des...
Vraiment qu'après, tu peux le faire en CSS, tu vas me dire,
mais... ou un JS, mais...
Ouais, mais après, tu vas pas pouvoir tout faire.
Ouais, ouais.
C'est ce que Charlie a expliqué tout à l'heure,
c'est qu'à un moment donné, c'est tellement,
enfin, si tu veux faire des trucs tellement complexes,
ça risque d'être beaucoup plus...
beaucoup plus compliqué, quoi.
Donc, après, je pense que, ouais,
faire des burgers animés, que comme on voit,
je pense que, ouais,
ça, je pense qu'on peut peut-être
le faire facilement en CSS.
Voilà, un petit burger
qui tourne, bon, à la limite.
Par contre, commencer à faire
un vélo qui tourne avec les pédales
et les roues et tout ça,
là, ça commence à être beaucoup, beaucoup plus complexe.
Bah rien que le bonhomme, là,
qui... enfin, la petite carte verte, là,
qui... les bras qui balancent, là, c'est...
Fais le dans CSS.
Je passe la semaine, c'est sûr.
Ah ouais, ouais, ouais.
Et puis, non, et puis en plus,
c'est pas responsif,
ça va pas bouger, enfin, c'est...
c'est infaisable.
C'est infaisable.
Excellent, excellent.
Très bien.
Et bah, écoute, c'est un outil
qui faudrait peut-être creuser
pour toutes les personnes qui veulent,
justement,
passer sur des animations
à une grande échelle
ou en tout cas, mettre un petit peu plus de vie
dans les...
sur les sites internet.
Donc ça, c'est plutôt bien.
Tu nous parlais
de l'Auti Studio.
Aujourd'hui, c'est terminé
ou c'est un projet qui...
c'est fini?
Alors, le site est toujours là, donc c'est...
Donc c'est jamais mort.
C'est jamais mort. Non, c'est un projet qu'on avait lancé
en 2019 avec donc
un motion designer et un product designer.
Et le pari, c'était de dire,
on va proposer à des startups,
des agences, un... un package tout en un
de...
On vous fait la création, l'intégration, le développement
tout de A à Z et vous avez à la fin
un site qui est canon, comme celui que tu vois là, tu vois.
Sauf qu'on l'a lancé fin
2019, début 2020, donc on est deux suits
de passer dans... dans...
dans l'air du Covid.
Et...
Je vais apprendre à tout se passer à autre chose
parce qu'il n'y a pas eu... il n'y a pas eu
ce momentum du début et voilà.
Donc c'était un projet très fun.
Je m'en sais encore comme... comme vitrine
ou même comme...
Comme j'ai besoin de... ouais, de faire du lock-in
encore, bah du coup, cette connaissance là,
grâce à ce site.
Mais commercialement, il y a plus de...
il se passe plus grand chose sur l'autre studio.
Ok.
Dac, ça marche.
Et bah écoute, parfait.
Je te... peut-être
t'as quelque chose à rajouter
ou une envie, quelque chose à nous partager
Charlie avant de... de terminer l'épisode.
Écoute, non, rien de...
Il faut tester en fait.
C'est... c'est comme tout.
L'idée, c'est de... c'est de...
c'est de tester. De toute façon, on le dit tout le jour.
Par contre, peut-être que...
ça va être plus difficile de trouver
un... un... un motion designer.
Donc peut-être on peut commencer, déjà,
par utiliser...
sur la librairie, sur la bibliothèque
ou la librairie de Lothi files.
On peut déjà utiliser, commencer
à twequer un petit peu l'outil
et puis... et puis après, passer
sur des choses un petit peu plus conséquentes
avec un motion designer.
Super.
Juste pour ouais, ça m'a même fait penser à un truc.
Je pense que Lothi, ça s'inscrit aussi
dans cette...
mouvance de...
de l'éternale des banthres, le designer et le développeur.
Oh.
Ou le designer qui dit, ah non, c'est pas exactement comme je voulais que ce soit.
Et je pense que Lothi enlève
ce problème-là parce qu'en fait, il est...
le designer exporte son animation
et quand elle est... quand elle est rendue, elle est intacte.
Il n'y a pas de... ah non, mais j'avais mis un peu plus rouge,
un peu moins rouge, un peu plus grosse.
Oh la la.
Il y a un problème, tu dis au designer, tu me la...
tu me la re-exportes et je la re...
je la recharge et c'est terminé.
Mais non, mais ça, ça solutionne un...
et ouais, ça, ça solutionne un gros problème
de... de management
et de... de relation et de...
de... ça vient apaiser
toute tension qu'il peut y avoir
entre... entre les deux personnes.
Exactement, ouais. C'est un peu comme Webflow,
ouais, c'est genre le designer peut faire lui-même
son design et... et il peut... d'ailleurs Webflow,
tu peux faire du login en Webflow très simplement,
ça me fait penser aussi. Ah c'est...
Il y a une intégration native de Lothi, tu mets juste...
le lien du fichier et puis c'est parti.
Donc... non voilà.
C'était le point...
le point crucial...
pour la paix entre designer et native.
Et on restera là-dessus.
Carrément. Un grand merci à tout le monde
d'être resté jusqu'au bout de l'épisode.
Ouais. Pensez à nous mettre un petit pouce
euh... à parler du...
un commentaire ou à parler
de Double Slash à vos collègues.
Ça nous fait toujours plaisir.
À bientôt, merci Charlie
d'être venu sur Double Slash.
Merci. Avec plaisir. Merci à vous.
Ciao, ciao. Ciao.
Retrouvez Double Slash
sur vos plateformes de podcasts préférées
et sur le site Internet du podcast
www.slash-podcast.fr
Sur le site vous allez retrouver
tous les liens de l'épisode, les références
évoquées durant l'émission.