Matt Perry - (Framer) Motion - The Evolution of Animation Libraries
Durée: 54m11s
Date de sortie: 09/12/2024
This week we're talking to Matt Perry, a creator of Framer Motion. Matt is a software engineer at Framer, and he's been working on the animation libraries for a while and has a long history of innovation. He recently left Framer to focus on the now rebranded Motion. He aims to make more of the library usable form frameworks outside of React.
- https://x.com/mattgperry
- https://motion.dev/
- https://github.com/motiondivision/motion
- https://github.com/mattgperry
- https://motion.dev/about
Episode sponsored By MUX (https://mux.com)
Become a paid subscriber our patreon, spotify, or apple podcasts for the full episode.
Vous ne pouvez pas déterner beaucoup de les animations que les gens ont faits pour un développeur,
parce que ça va prendre des mois et des mois de travail en enjeune pour faire des animations.
Ou vous pouvez juste utiliser la motion avec le progrès de la lait, et vous pouvez réécrire ces choses.
Bonjour, bienvenue à DevTools FM, le podcast de la tue de développeur.
Et les gens de Make'Em. Je suis Andrew et je suis le host de MyCo.
Bonjour tout le monde, nous sommes vraiment excitées d'avoir Matt Perry avec nous.
Matt, vous êtes le créateur de pop-motion et de frame-remotion.
C'est une très importante animation librairie, c'est-à-dire dans la raxine.
Et vous avez des news sur la motion frame-remotion, maintenant la motion et la direction de la nouvelle.
Donc nous sommes incroyablement excitées à vous parler de ça.
Mais avant de nous déterner, pouvez-vous nous dire à nos listeners un peu plus sur vous-même ?
Oui, c'est tout de même le long et le short de la vidéo.
Je l'ai élevé trop de livres de animation à ce moment.
Et le plus tard, le final, c'est juste de motion.
Et c'est une direction de continuation de tous les livres de motion.
C'est tout bundlé dans cette 1 animation.
Donc, on va le faire à la fin de la vidéo, car cette histoire commence longtemps et longtemps.
Alors, on va commencer avec l'animation en général.
Qu'est-ce que vous avez fait pour vous faire des livres de animation ?
Et où étaient les outils à la fois en train de se faire?
Oui, c'était originalement un design.
Et je l'ai fait plus en développement, par accident, je suppose.
Je l'ai vraiment fait dans le design.
Ça a juste été arrivé, je pense.
Et c'était un peu de la première fois,
mais c'était un peu de la première fois,
et c'était un peu de la première fois,
mais c'était un peu de la première fois,
et c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était un peu de la première fois,
mais c'était uneileen.
Je départ par le nom Redshift,
qui deаний envers des extraits pour lesoz
du monde DEIhu.
Ce n'était pas le meilleur nom,
on n'était pas très passés.
Ce disputant a été fait en même f Chaparception,
et c'était à mon tente de faire un livris où
il est possible de faire tout ça.
Je voulais être de très l'a Step's Level.
Et c'est un sétument, je pense, qui a l'air,
les gens qui l'aimaient, l'aimaient,
parce qu'ils étaient les uns,
ils étaient presque les utilisateurs de la power,
ils étaient attractés à ça,
mais ils n'ont pas vraiment gagné de l'attraction,
et je pense que beaucoup de cela
a été pour faire avec l'inherentation et l'inplementation,
en termes de besoin,
pour comprendre un certain programme fonctionnel,
paradimes,
ou...
le point de vue de boiler
qui vient de faire un peu de rènder
la function, à chaque fois.
Et l'année dernière,
certains ont été simplifiés,
mais, en fin,
ils n'ont pas vraiment...
Le dégradement que nous avons vu
avec les poses,
et qui l'aimaient directement
dans la motion de la frame,
qui a...
une sorte de crystallisation.
C'est comme ça,
j'ai presque été scotché
par faire quelque chose
qui était à un niveau très low,
mais je voulais créer
quelque chose qui a fait
quelque chose d'accessible.
C'est pas bon enough
pour les choses qui sont possibles.
Il faut être chiant
en termes de temps pour les gens
pour faire ça,
sinon,
ce n'est pas bon.
Et en termes d'animation,
c'est très facile
pour l'API,
juste de
être trop trop pour un utilisateur.
Même...
J'ai créé un custom
pour la motion de la frame.
Quand je l'ai déjà commencé
à commencer à utiliser,
c'était un concept
de beaucoup de nouveaux.
Donc, si vous êtes à un niveau low,
je peux imaginer que c'est plus difficile.
Oui, et ça me surprise toujours.
C'est comme ça.
Et je vais prendre
un autre tour de la run.
Parce que
c'est beaucoup de concepts.
Et le problème avec la motion de la frame,
ou la motion maintenant,
surtout la motion pour le réact.
La motion...
Donc maintenant,
il y a un son de la vanille
et un son de la réaction.
Et le problème de la réaction,
je dirais,
c'est qu'il y a ces concepts.
Mais le problème,
je pense,
avec un simple API,
c'est que
vous avez toujours à atteindre le limiter
de la possibilité.
Et alors, vous voulez introduire quelque chose
où...
OK, si vous faites comme ça,
vous enlèvez ces features.
Si vous faites comme ça,
vous enlèvez tous ces autres features.
Donc,
il y a un couple de
deuxcrews.
Alors que
l' Poste
Et le Yin
sera collaboré,
apparemment,
qui va prendre
et puis on peut faire toutes les choses avec les valeurs de motion,
qui est une feature d'utilisation de power.
Mais comment vous introduisiez-vous de façon qui ne fait pas que les gens sentent
qu'ils ont besoin de savoir ça, ou qu'ils sont scèdés de ça ?
Il ne faut pas que les gens puissent avoir 5% de la valeur de motion.
Et les 5% de la chose qu'ils font, c'est incroyable.
Je n'ai pas découvert la message et c'est quelque chose que je voudrais prendre en compte.
Je suis en train de faire ça, et c'est plus en fait,
en fait, en taking motion independent, c'est maintenant plus,
mon intérêt est aligné avec ce que je peux faire comme facilement,
pour les autres.
On va parler de ça un peu.
Vous avez créé Pop Motion,
c'était plus de 6 ans ?
Oui, c'est sur ça.
Je pense que c'est moins, mais je suis toujours en train de faire ça,
6 ans, et je l'ai fait pour la pause, pas plus avant.
Et ça m'a fait un peu de temps.
Vous avez créé Pop Motion,
ou bien, vous avez commencé, et vous avez participé à la frameur.
Et peut-être que c'est plus important de parler de ce que la frameur est
et de ce qu'elle fait.
Oui, alors, on va commencer là.
Qu'est-ce que la frameur est pour ces gens ?
Ok, la frameur est facilement,
et je le dis d'une perspective complètement inbiète,
mais je peux dire avec cette conviction,
cette conviction de la personne qui est en train de parler,
c'est pas comme, je ne suis pas self-agrandisant
par dire ça.
Non, c'est pour mon money, le meilleur code de la web site,
que ça existe,
parce que ça s'appelle un tour de design,
ça s'appelle Figma,
et c'est la langue que je parle,
je suis en train de faire une photo,
pour illustrer le design.
Ce sont tous les concepts que je suis assez familier avec,
je comprends pourquoi la webflore est plus familiale,
c'est un processus plus facile,
peut-être un peu plus techniquement,
mais je pense que la frameur de Freeform Canvas
est vraiment un des gens de la jale,
je pense que beaucoup de confusion,
c'est peut-être qu'il y a un prototype,
quand j'ai jointé.
C'est toujours la même Freeform Canvas,
mais c'est plus en faisant des designs
que vous pouvez jouer avec,
et vous pouvez donner à un joueur,
et dire que c'est ce que ça va vraiment se sentir,
et quand j'ai fait la frameur de motion,
c'était vraiment ce que ça va se sentir,
parce que c'était en utilisant le truc réel,
que vous pouvez faire le site.
Mais le problème avec le prototype,
c'est probablement de l'indicatif,
mais c'est assez intéressant,
c'est comme ça qu'on a terminé,
comme un site-builder,
par exemple, on a des ingénieurs,
mais le marché ajustable pour le prototype,
c'est comme un niche très précis,
et je pense que les gens,
c'est un peu comme l'APR de PopMotion,
qui nous a dit,
les gens qui l'aiment,
ils veulent un prototype,
et ils disent que c'est la partie importante de leur workflow.
Mais si vous imaginez le pipeline
de design,
tout le monde en production,
le premier que vous pouvez y aller,
c'est d'aller à l'économie,
ou même les gens qui peuvent juste
le faire entièrement,
c'est le prototype,
c'est bien, mais c'est pas vraiment
le truc qui va...
Vous n'avez pas de bâtiment,
mais par faire un prototype,
par exemple,
ils ont fait un site-builder
d'amazons,
et le step...
C'était pas même un pivot,
c'était seulement une continuation naturelle
de la capacité des tools,
mais naturellement,
parce que...
Parce que c'est... Parce que c'est tellement réussi,
maintenant,
le prototype et les trucs
sont sortis de la façon dont c'est fait,
et je pense que c'est un processus naturel
de mon point de vue,
d'understand pourquoi les gens ont toujours
cette confusion, c'est un prototype,
c'est un site-stuf,
ou c'est un p'tit compétite,
ou c'est un site-builder,
et c'est très...
Je l'utilise pour motion.dev,
je suis un grand fan,
je me suis dit que je suis un fan
à ce point, mais pour les
dernières années, il y avait
une main dans la compagnie,
Matt ne sait pas ce que la frame est,
il ne sait pas comment utiliser,
car je suis très concentré sur la frame d'émotion,
mais maintenant, je pense que je le sais mieux
que beaucoup de gens en frame,
je l'utilise beaucoup, et je suis un grand fan.
Quand c'était un prototype,
les animations ont été construits
dans un moyen qui n'a pas
travaillé sur les websites normales,
et c'est là que vos libraries sont
préparées pour la production,
d'un point de vue d'animation.
Oui, ils ont...
Il y avait
une environnement de sandbox
où vous avez un API de coffe,
et vous travaillez directement
avec le DOM,
c'est techniquement,
et quand ils ont bougé
dans une situation de gout,
ils ont aussi porté ça pour réact,
et avec ça, ils n'ont pas vraiment
un easy
pour utiliser l'API, et les animations
n'étaient pas dans les UI à ce point.
Donc, quand j'ai jointé,
l'idée était de faire
un library d'animation simple,
que vous pouvez dire, un designer ne compterait pas
le prop de l'animate,
c'était le corneau,
vraiment,
de l'API à la fois,
et pour faire un ballon draguable,
c'était un concept de l'animate,
il m'a dit que c'était absolument pas un argument simple,
qu'il n'y avait pas réussi,
je ne sais pas,
mais c'était le but.
Et puis,
la production,
c'était juste bien,
c'était juste bien, que ça s'est passé.
Il y avait des animations, un motion magique,
vous ne pouvez pas détenir
beaucoup de les animations
que les gens ont faits
pour que ça s'en fasse
des mois et des mois de travail en enjeune,
d'être en train
de faire des animations,
et vous vous avez
éprouvé tout ça à l'heure de votre app,
ou vous pouvez juste utiliser le motion magique
avec le prop de l'animate,
et vous pouvez réécrire ces choses,
et maintenant, of course, Framera a
l'Ui sur les animations
et tout, donc,
même leur focus sur l'API
a disparu,
qui a fait un nature,
un nature naturel,
d'une manière naturelle,
par rapport à Framera,
il est vraiment successe, il y a un grand utiliseur,
mais en fait, le motion,
c'est pas grand plus grand
que les...
Je ne sais pas si on peut être,
je ne sais pas si on peut être,
mais c'est grand plus grand
que l'existence de Framera,
mais ça aussi a servi
un certain % de la web,
et ça a vraiment servi
un certain nombre de gens,
et c'est pourquoi ça a fait
un sens mutuel
pour Framera et moi,
c'est évidemment un grand sponsor
et je travaille avec eux
plus tard,
mais oui, je pense que c'est
aussi la façon de l'exercice,
l'exercice et l'exercice, je pense que j'ai un plein circle,
mais...
c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est un peu plus grand,
mais c'est pas un petit casque,
La première chose que je vais dire, c'est que les animations sont les plus élevées dans l'animation.
Je suis sûr que ça a un engin de hybride,
si une propriété peut être animée par le GPU, ça va être possible.
On utilise WAPI pour ceci.
Donc, ça toujours t'essaie de faire le plus performant possible.
C'est pareil avec le timeline scroll.
Si les options que vous avez donné sont possibles à faire sur le timeline scroll,
ça va être possible.
C'est pour les deux.
WAPI animations, JavaScript animations,
mais aussi si vous vous donnez une fonction,
ça va être un timeline scroll et ne pas être pollué par le scroll position.
La position polluée par le scroll position est comme une read,
mais ça va être une chose que les gens ne doivent pas faire.
On utilise le timeline scroll.
C'est pas toujours ça, mais c'est le cas.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est un engin de hybride.
C'est mon problème.
On va en faire des rues de façade.
Les rues de façade
n'est pas une rue de façade.
En fait,
c'est pas toujours expensif.
Par exemple, si tu as un box
isolé de l'autre page
d'une rue de façade
d'une rue de façade,
tu peux animer le width et le high.
C'est probablement bien.
Le 99% de l'usage ne va pas l'assister.
Si tu en animes le width et le high
d'une rue de façade,
tu as des textes de la rue
et des grilles,
c'est une bonne idée.
C'est pareil avec certaines propriétés.
Par exemple,
l'une des raisons pourquoi l'animate de la rue de façade
n'est pas bonne, c'est parce que la rue est de la peinture.
Tu peux animer le filtre et il se débrouille
complètement de l'acceleration.
C'est incroyable.
Mais ces situations,
c'est très spécifique.
Je vais essayer de faire
un changement automatique
dans un moyen
qui fonctionne.
Je n'ai pas besoin de l'envers.
Parce que
en particulier quand tu as des designs
sur la frame, mais ça se débrouille aussi.
Si tu as un large layer
qui est massive,
tu ne veux pas être en train de le faire
en disant que l'ascent est trop grand.
Si tu appris un changement de rues
et tu es sur un iPhone,
le broussard va râcher,
mais
si tu as une transformation animée,
je le mets dans le churistique
où on a fait une tournée.
Je l'ai vu dans le size de cet élément.
Je le mets dans le churistique.
C'est comme si
l'arbre de la surface est plus grande
que l'arbitre,
et que l'on utilise les animations JavaScript,
n'apprêche pas le changement,
n'apprêche pas le changement en WAPI,
et le fais juste avec un style.
Et ce que nous faisons
c'est de cet élément,
cet énorme élément.
Et je pensais que c'était bien.
Et j'ai testé, et le frame rate
était bien plus grave,
car maintenant on est en train de painting
l'élément de changement.
Mais ce n'était pas ce qui a causé
le slowdown, c'est tout.
Si tu regardes le style,
les calculations de style que ça a été
le tricot de la course de la slowdown,
comme 95% de la time de ces calculations,
mais je n'ai pas vraiment été au bout
de la question de pourquoi le changement
de style ou le style attribute
pourrait avoir cet effectu cascadien,
surtout quand il n'y avait pas
des règles CSS
comme style equals this,
qui pourrait être très dangereux.
Je n'ai pas vraiment découvert
ce que c'était, mais je n'ai pas
trouvé que si tu animes
un CSS
variable
en utilisant WAPI,
et que tu enregistres
un code de CSS
qui est un API,
et que tu dis isoler le truc,
alors que pas de les calculations
de style sont déclarées.
Donc, ce que nous avons fait
c'est de la purpose de déoptimer
l'animation de l'application de la GPU
et de la purpose de la faire
pour que nous le portons maintenant
à la pente,
mais de la faire
un WAPI via un variable CSS
pour les calculations de style.
Et il y a tous ces petits trucs,
ce n'est pas le truc advisable
à faire en général.
Si tu animes comme ça,
animer un code de CSS via un attribute style,
si tu n'avais pas eu les calculations de style,
ce serait plus facile
dans les situations,
mais dans cette situation,
c'est plus facile.
Parce que tu peux encore en mettre
dans d'autres situations,
c'est un exemple très long
de dire que c'est difficile
de faire avec
une pente
avec des brouilles de brouille
comme ces rôles
donc je me inquiète
de faire l'intention
il y a toujours des pratiques bestiaires
mais je n'ai pas été dans
beaucoup de situations où
c'est le meilleur moyen de le faire
et tu es donc pas en train de le faire
et je suis comme...
possiblement, mais le temps où ce n'est pas le temps,
c'est le temps où il va crusher le browser
ou c'est comme...
tu te parles de ces conversations
et oui,
c'est peut-être un lintero
mais c'est une visibilité
c'est une réaction, pas une erreur
oui, définitivement, les erreurs
disent beaucoup plus que une réaction
tu dois avoir vraiment de bon documentation
sur ces réactions
je pense que ça parle de pourquoi
les libraries sont importants
parce que nous parlons de
des propres complexes
que tu dois savoir
c'est comme
oh, cette propre
elle se présente de cette façon
tu as donné un bon API
pour être basé sur les propres
et pour
les libres
et pour les libraries
d'émotion
et je pense que après Flash
on n'a pas de chose
mais dans cette zone de dédécembre
c'est vraiment difficile de faire des animations
c'est vraiment difficile de faire des animations
donc au moins c'est sympa de voir les browser s'imprové
oui, 100%
comme dans les secteurs de service
c'est un grand nombre
dans les animations scrolls
on peut avoir un poil
d'épopulation
et puis tu as des propres CSS
comme une forme de chance
par exemple
qui...
et tu ne dois jamais savoir tout ce qu'il y a
c'est drôle quand tu parles de ces choses
dans tous les browser
il used to be
que si tu animé transformé x100 pixels
ça serait accéléré
mais si tu animé 100%
ça n'aurait pas accéléré
car ça a renait sur le nombre de la taille
de l'élément
et c'est l'une des de la manière dont je vais essayer de faire
avec cet exemple précédent
j'ai essayé de le faire
en l'applicant
c'est comme un no-up calc
qui ne rapporte pas 100 pixels
dans un no-up calc
juste pour voir si le calc a le déoptimisation
on ne peut pas trouver quelque chose
mais c'est un peu d'application
c'est assez d'application
en ce sens
mais sur Safari
WAPI
ou Hardware animations
etc
sont élevées par un core animation
c'est ce qu'on appelle
le level OS
animation, API
ou quelque chose
mais il y a des choses que le spec supporte
comme playback rate
le core animation ne vous laisse pas changer
le playback rate
si vous ne faites pas une animation
et que le playback rate change
à 1.0000001
c'est essentiellement 1
mais très différente
ça déoptimise
l'animation
de Hardware Accélérations
en Safari
et j'ai utilisé ça
quand j'ai commencé à développer Motion 1
j'ai utilisé les bugs
et ça m'a été
le jQuery
de WAPI
donc j'aurais eu
une option
d'assurer que les webcats accélérations
soient fausse
parce que c'était beaucoup de bugs que j'ai utilisé
et c'est le plus rare que j'ai eu
et j'ai eu ce petit snippet
que le playback rate est 1.0000001
et je pense que
vous avez pu voir
une partie de ces choses
et vous n'avez jamais compris
ou vous avez vu un peu de
des problèmes
des problèmes
des problèmes
des problèmes
des problèmes
des problèmes
des problèmes
je pense que
vous devez profiter
des problèmes
je pense que ça always vient de ça
Cool, vous avez mentionné ça
quelques fois, mais vous avez
un projet 3rd
qui est arrivé
il y a un an
quand l'animation web
a commencé à générer
on s'est dit WAPI
j'ai vu ça s'occuper
j'étais en train de dire
il n'y a pas de motion
on peut juste utiliser le browser
mais ça n'a pas été le cas
quel était le but
avec motion 1 ?
motion 1 était un expérience
donc j'ai terminé
en writing these libraries
j'ai voulu faire un livre
j'ai essayé de faire un livre
j'ai évoqué un livre
j'ai évoqué un livre
avec motion 1
j'ai voulu essayer de user
les apparemments
je m'en entering
je me souviens d'avoir
quand WAPI cód dynamics
et d'util проверme
je n'ai pas vraiment p Paramount
mais ici
on apprend
on ne identifies inciliers
on ne parle pas du bullying
pour les miennes dans les partially de faill gelernt.
Je dis que les valeurs d'une décision sont très importantes.
Si je dis qu'une décision est de 200,
ça devrait animer 200 pixels,
parce que tout le monde sait que la valeur de la décision est de 200 pixels.
Ce n'est pas la décision de la décision.
Donc, si on parle d'un string de 200 pixels,
je pense que les choses sont vraiment très importantes.
La facture que tu ne peux pas interrompre l'animation,
et la facture que tu ne peux pas arrêter de la mettre bien,
c'est que tu dois arrêter toutes ces choses.
Ce n'est pas d'exception d'une décision.
Donc, maintenant, ça génère dynamiquement une ligne de démonstration.
Vous voyez, c'est une démonstration sur le vol,
le même spring.
Si le bras supporte,
on utilise la ligne de démonstration.
Et si ça ne le fait pas, ça génère des keyframes.
Donc, ça fait un peu de choses.
Et maintenant, on est à un point où...
C'était la motion 1.
C'était un projet de l'analyse, et à l'époque,
je travaillais en 16 heures un jour.
Je n'avais pas le temps pour ça.
C'était une chose que tu pouvais faire.
Mais je vais chez moi et je travaille sur ce projet de l'analyse.
Et à l'époque, je n'ai pas vraiment joué et j'ai eu beaucoup de whisky.
Et je n'ai pas réalisé que je ne suis pas en train de perdre mon temps.
Je devais être plus amusant.
J'étais, jusqu'à ce moment,
dans mon temps libre.
Le travail devrait être en train de travailler.
Et depuis le début, je n'ai pas vraiment touché ça pour un temps.
Mais, en temps, parce que, évidemment,
le travail de la motion 1 était mon travail.
Mais beaucoup d'innovations se sont créées
dans la motion 1.
Il a été terminé avec l'engin de l'hybrid,
où il a été créé le engin de JavaScript,
mais pour quelques kilobytes,
il a aussi eu cette passapath, où il pouvait le trouver.
Maintenant, il a eu une version mini
de la fonction animatique,
qui était juste 2,5 kilobytes.
Le view de l'envie,
et les animations scrollées,
ça allait tout de la motion 1.
Et puis, ils ont été réimé dans la motion 1.
Mais ils n'ont jamais vraiment fait de retour à la motion 1.
Donc, c'est pourquoi, dans la motion 1,
je suis ré-enfiné,
la application JavaScript,
l'application vanilla,
et maintenant, on a eu toutes ces innovations
qui ont fait une motion frame,
mais qui n'ont jamais fait de retour à la motion 1.
Mais oui, c'est tout de même.
C'était un expérience qui a été trop fort.
J'ai vraiment aimé la motion 1,
mais je ne pense pas que c'était un peu plus healthier.
Je ne vais pas être plus jeune.
Je n'ai pas besoin de ça.
C'est intéressant de vous déterrir
dans notre prochaine vidéo,
parce que c'est comme si vous étiez en mode hard mode.
Mais avant ça,
en taking
un library frame motion,
qui est comme, très réacte centrale,
et vous avez parlé de faire
beaucoup de vanilla stuff
en motion 1,
et puis,
en tournant tout ça ensemble,
pour éliminer un library qui ne sera pas
juste réacte centrale.
On peut avoir une bonne expérience de réaction 1er,
mais être plus général et utilisable,
c'est un problème de design
car comment vous pensez
que les animations en réaction sont très différentes
que comment vous pensez des animations
et beaucoup d'autres frameworks.
Alors,
quel sont les défis que vous avez faits?
Et
comment vous faites-vous que ces paradigmes soient travaillés ensemble?
Je suis heureux.
Je veux dire
que
il n'y avait pas de plan pour ça
que je pensais que ça allait
arriver, mais je l'ai écrit tout.
Avec la considération
que, à un moment, ça pourrait être
déterminé à l'internau.
Tout en frame motion
était déjà...
Tout en frame motion était déjà...
C'était pas un problème,
c'était que c'était réacte,
donc, les choses sont pas tout,
pas assez, mais
beaucoup de choses sont encapsulées
de réacte. Je pense que c'est facile
parce que... et ça a été
naturellement, parce que
quand j'ai laissé
frame motion 3D pour le fibre réacte
ça a besoin de certaines abstractures.
Comme
le fait que vous pouvez laiser
toutes les fonctionnalités d'animation
ça a besoin de certaines abstractures
et comme la histoire
d'incorporer
une motion pop,
originée d'une dépendance externe, mais
ensuite, avec la motion 1,
d'une dépendance externe, et de
tout ça, en bas en train de
l'architecture
l'a rendue.
Donc, quand j'ai voulu faire
certaines choses, comme
élever certaines choses, comme
un framework agnostic API,
c'était vraiment
de les exposer
dans un moyen... et en fait,
la partie du hard bit, c'était juste de la
réacte n'était pas inclus dans le final bundle.
C'était vraiment
toujours de types, comme j'ai importé
un type, c'était important de types
de réacte, et je suis
toujours en train de faire un petit
peu de tout ça, et je n'ai pas vraiment
été indépendant maintenant
pour 6 jours de travail, donc
je dois me donner un break, mais je me sens
un peu mal que je suis passé
trop vite sur le côté business de la things.
Et je n'ai pas vraiment été, ce que j'étais
dans le camp, dans le
dans tout ça.
Donc, il y a certaines choses que je
dois faire en fait, et je vais faire sure que
le stuff qui est là, c'est là, le stuff qui est là,
et je vais ne pas...
Ils sont tous en la même manière et
ils ont encapsulé...
les choses d'un motion, ça a été très bien,
c'était tout le même, je ne veux pas
trop trop faire ça, mais au moins
séparer le stuff, le stuff de JavaScript,
et le stuff de réacte, et avoir le
renderer à un niveau sensible,
et je veux faire
ça dans un moyen
que vous pouvez
juste installer le motion,
et puis tout de suite,
si vous voulez
une motion pour réacte,
vous pouvez juste
faire une motion pour réacte,
et quand je commence
à mélanger les frameworks, ça
va être un problème bien répliqué,
mais je veux juste l'esthétique
de ça, qui me semble chaleur, mais je pense
que ça change,
même le motion,
tu ne veux pas un package scope,
je me sens
peut-être que c'est juste un bias,
mais je me sens comme l'esthétique
d'un package scope important,
et des choses comme ça, ils ne me sentent pas bien,
donc je vais mettre un nombre
d'ordinaires à faire surement
pour que vous puissiez importe tout
d'un point sub-entrée.
Ça va être assez le challenge
quand il s'agit de types, je pensais
que si tu parles, tu as deux packages,
mais
optionnelles, pour toutes les frameworks,
ça va être
un problème.
Oui, et ça peut être impossible, je ne sais pas,
mais c'est la chose
que je vais donner un shot, car je
valse et veux ça
dans mon usage,
oui, tu as fait un bon travail avec l'API,
je l'ai coupé dans les docs,
et la version vanilla, et je me suis dit,
ça ressemble à ce que je devais
l'API pour un library javascript,
et le API vanilla est
dans le fond, mais c'est
bien approachable.
Merci, et c'est bien,
je n'ai pas bougé,
il y a des choses que je veux
faire dans le vanilla,
qui vont me faire sentir un peu plus
dans le fond,
c'est pas le raison pour qui ils vivent
dans le reactland,
et c'est un peu
un peu de choses,
c'est bien,
il y a seulement quelques exports,
c'est aussi ce qui fait que c'est approachable,
mais pour exemple,
c'est un petit, mais on a
un geste hover, qui est facile,
c'est juste un mouseover,
mais il y a un point de filter
et quelques autres choses,
il y a un certain pattern,
et c'est bien
de ré-write juste ceci,
et de le faire comme un hover,
donc le menu
va se remplir, et il va se faire
un peu plus robuste, mais
j'espère que les fonctions
elles-mêmes
vont toujours être simple et
intuitive à utiliser, c'est ce que je vais
faire, et puis je
les recrute dans le version React, c'est la
chose de la dernière, quand je ré-write
ces choses, je les donne au JavaScript,
l'API, mais avant que ça
s'éteigne, je vais ré-write
comment c'est implementé et ré-acte,
en utilisant cet API, et si
je ne me démarre pas,
c'est une chance pour me faire
faire surement qu'ils soient fixés,
bien, on va
transporter un peu et parler de
votre département de la frame,
donc, vous avez
en train de faire un employé à la frame
pour 6 ans,
travaillant
à la motion de la frame,
ce qui est maintenant
une motion de la frame, et je me
trouve toujours ces
mouvements indépendants vraiment
intéressants, les folks indies
sont achetés par Stripe,
et puis, ont été récentement
élevé par Stripe, et je me
trouve
comment
les ergonomies de cette
travail, donc, quelle était
la conversation, comme, de
prendre la frame, et maintenant
que vous êtes en train de faire un
employé, comment vous pensez
sur les différences de comment vous
travaillez, alors que vous êtes en frame
versus comment vous travaillez, en
train de faire un employé ?
Oui, je suppose que vous avez
fait un peu, donc, en cours de
l'année, je voulais toujours
faire une motion, je me sens
que c'était un succès,
mais en 3, je me suis toujours
poussé pour, je ne voulais pas
voir, je ne voulais pas que ça soit
une partie de la frame, je pense,
et donc, j'étais toujours poussé pour,
on pouvait moneterre ça comme ça, on
pouvait moneterre ça comme ça, et il n'y
n'y avait pas d'interesse, et
d'accordement, donc,
parce que le
market ajustable de
ce que la frame est en train de faire, est
tellement différent de ce que je vous
suggère, ce que je vous suggère, c'est
que, imaginez si vous avez fait ça
sur ça, et c'est comme, imaginez, c'est
bien pour une personne, mais c'est pas
bien pour notre whole team de gens, donc,
et likewise,
j'ai été, en fait, en faisant
une frame de motion, c'est le meilleur
de mes habiletés, comme un
fief d'un personnel, j'ai voulu
juste moi, et je
toujours voulait faire les périodes où
j'ai dû faire ce que j'ai voulu,
il y avait des périodes où
j'ai travaillé plus近 avec la
team, mais c'est tout ça,
c'est un peu différent de la façon dont je
travaille, et c'est un peu mieux que d'autres, et
comme la façon que mon cerveau travaille,
je dois le faire,
je dois le faire,
je pense que j'ai appris
l'année, si je vais essayer de
poursuivre mon cerveau pour
concentrer sur quelque chose, que c'est pas
vraiment ça qui est intéressé, alors
je vais être malade, donc, à l'heure
je vais jouer
sur mon sens de momentum,
en termes de, si je suis
intéressé en ce moment, je dois tout
faire, c'est ce que je dois faire, et
de cette façon, vous ne pouvez pas
faire ce genre de
sens, mais je dois faire ce genre de
poursuivre, si vous vous attendez plus longtemps,
le poursuivre devient intéressant,
donc je me sens toujours comme, je ne peux pas
faire tout à l'heure, donc je vais
faire les choses que je suis intéressé, et
puis, je vais le faire, je vais être
intéressé par ces choses, car je ne
les caress, donc,
d'essentiel,
d'avoir ce sort de cerveau
dans un company
qui maintenant, surtout quand
il y a eu un succès, comme c'était
difficile, je suppose, de
aligner l'intérêt de la motion
avec l'intérêt de la frameur,
qui je suis assez concerné par le faire,
parce que je suis, comme, un grand fan
de la frameur, et je
l'ai, j'adore travailler là,
c'est un phénomène de la company, mais
je me suis toujours, mais, avant ça, je me suis
toujours demandé ce que l'est le meilleur de la motion, et
en savoir que, oui, la frameur est un
grand consommateur de ça, mais c'est
toujours le reste de la web, donc,
comment nous servons à nos audiences
pour les meilleures mobilités,
c'est comme,
et la conversation a commencé
par, c'est pas
que je n'aurais jamais pensé de ça, mais
quand c'était suggestionné, je l'ai
déjà dit, c'était juste une pensée de
pensée, je me suis dit, boum, on va faire un plan,
on va le présenter à la company, et ils ont été
incroyablement, je pense qu'ils
l'entendent aussi, parce que c'est
une situation d'affichage,
en ce moment, si on type en animations
d'affichage, c'est évidemment
que la documentation de la frameur est
en train de se faire, c'est un site
de la structure, ils ne sont pas
besoin de ça, ils ne sont pas
besoin de ça, donc,
maintenant, en temps, c'est la situation
où, si on type en animations, vous avez
leur documentation, comme vous le devez,
si on type en animation, vous avez
ma documentation, et c'est un
plus grand plus grand, et je pense que
il y a eu de la confusion entre
les deux choses différentes, et,
surtout, depuis que c'est
pas un prototype,
mais, pour faire quelque chose
en production, et en frameur, vous
avez juste de presser le bouton
de la publication, ça ne peut pas être simple,
pourquoi avoir un API, et,
si ça a été construit aujourd'hui,
on ne serait pas fait un
source d'animations,
je ne sais pas, c'est toujours
un truc qui me fait peur,
et je pense que nous avons naturalement
arrivé à cette conclusion, et, comme je vous dis,
ils étaient les 1ers et les plus grands sponsors,
donc, ils n'auraient pas pu être plus supportés,
vraiment, et, en fait,
il va continuer de faire le power
pour les animations, pour les websites
de tous les frames, pour un moment.
Donc, quand vous vous interviendrez et vous
vous faites votre propre company, il y a
beaucoup de choses qu'il faut penser,
une des choses qui est, comment vous allez
faire le fond, le frameur, le premier
sponsor, c'est bien, mais vous avez
des plans pour d'autres choses, est-ce que c'est
juste une sponsorship ? J'ai vu un grand mention
de courses sur le page, vous vous interviendrez
en réveillant un cours ? Je ne vais pas
faire un cours parce que,
comme je disais, mon problème est que je veux
faire tout très bien,
et je sais
que les gens qui font des courses sont très
bien, donc, je vais
juste poursuivre les
personnes pour leurs courses,
je ne vais pas faire ça mieux que
ces éducateurs, c'est pas
juste à la fois.
Et si je le fais, c'est pas un truc
de plus en plus, je me sens
comme si j'avais eu le temps de faire
quelque chose, mais parce que
ils ont fait tant de temps
pour les choses, c'est pas tant de temps
pour les courses, si pas
plus, plus de temps, parce que
c'est des professeurs,
je pense que mon problème est que ça
va venir à la détrouement de
les produits corporeaux, donc
la stratégie de monétisation, si je peux
le dire, en tant que grandios,
mais vraiment, c'est un document
avec quelques points de bulletins.
Mais l'idée est
que, oui, les sponsors corporeaux
sont un grand part
de ça, je me sens
comme si
il y avait beaucoup de compagnies
qui ont utilisé la motion,
les pages de la maison ont été
épargées, parce qu'ils ont utilisé
ces animations de vies,
et qu'ils sont superfans,
donc je me sens comme si
beaucoup de ces compagnies sont
en train de faire des compagnies,
et je me sens comme si
c'était un sponsor second,
d'autres utilisateurs extensifs,
et il y a un peu plus de pipeline aussi,
déjà, je considère
que je suis un peu concerné
de Cherne, mais je dirais
que nous sommes en train de
être très sustainables,
déjà,
mais, pour moi, je suis concerné de Cherne,
je veux encore un peu plus de ça,
parce que, si vous commencez à
faire un contract,
ou quelque chose,
ou quelque chose que je ne vais pas
exéler,
ou quelque chose qui peut faire
un CLI pour installer des compagnies locales,
ou quelque chose,
ils vont le faire plus vite que moi, mais
peut-être que je peux avoir des contracts
pour ces choses, et d'autres,
avec les sponsors,
je ne sais pas, mais
c'est un côté,
l'autre côté, c'est que les sponsors personnels
ne vont vraiment aller,
donc c'est aujourd'hui,
comme le record que j'ai lancé,
Motion Plus,
qui est en lieu
de les sponsors personnels,
et ça, Motion Plus,
va être un des fois
de
si
il y a 300 quid,
ou quelque chose qui s'est passé,
à la fin, je pense que si vous vous abonnez,
vous allez en supporter Motion,
il n'y a pas beaucoup de choses
que je peux vous donner, je suis juste en train de vous
vous en avoir accessé à notre discord privé,
où vous allez en supporter,
et vous allez rencontrer des utilisateurs super,
vous avez un papier de papier,
qui est probablement le plus bas
de la valeur que vous avez offert, mais je l'utilise,
et j'aime beaucoup.
Et il y a aussi, le premier que je fais,
c'est gâtir
le contenu, donc
chaque fois que je viens de la nouvelle guide,
je vais en gâtir, je ne veux pas gâtir tout le temps,
parce que je veux construire un robuste,
pour tout le monde,
mais ils vont venir en gâtir
à environ un mois,
ce premier est un guide de la integration,
et ça va être gâti
pour 40 jours, parce que c'est le Christmastre,
mais je ne vais pas enlever,
après le Christmastre, c'est pas possible,
et je ne veux pas le faire, et personne ne cares,
si je le fais. Je vais juste continuer
de gâtir, donc
à un moment, il y a
un certain nombre de choses qui sont timelards,
mais puis, à un moment, ça va construire le contenu,
ça me donne un incentive,
c'est ce que je vais faire, je vais enlever
mes incentives pour le meilleur de les produits,
donc je vais construire
ce library de contenu, que tout le monde peut utiliser
pour les gens qui veulent
supporter le projet et qui veulent
payer pour ça,
je vais voir, mais vous savez ce que je veux dire,
et puis, sur le top de ça, je veux construire
un library de permanente gâtir,
premium components,
qui sont de plus en plus
de l'application, comme un custom cursor,
des choses comme un ticker,
ou un particule,
ces choses qui sont construites sur les foundations
d'émotion, et ils vont avoir
ce que je vais
penser beaucoup sur l'API pour ces choses,
et puis, la dernière
chose, c'est que je veux construire un library,
on a des exemples,
mais ils sont
très, comme les baies,
et c'est ce que j'ai utilisé, j'aimerais
faire des temps, construire un catalogue de créations
de beaues exemples,
peut-être comme un ZPrivate,
il y a un brefot que vous pouvez downloader et
utiliser localement, ou peut-être que vous allez
sur un page et que c'est beaucoup,
en tant que l'application d'emotion,
et c'est tout le contenu,
qu'il n'y aurait pas de contenu, si je n'ai pas
un compendien, il n'y avait pas de raison pour moi
d'avoir à construire un framework, parce que ça va
prendre le temps pour mes responsabilités,
d'essentiel,
c'est le lien
de mes intentions
pour pouvoir garder ça sustainable
et pour le faire mieux.
C'est le truc que je suis en train de
tenter, je pense.
Oui, je peux imaginer un
CLI, où vous
pop-en, un
complexe d'animation,
des templates dans un projet, et
donner le user un bon point de jump.
Oui, exactement, c'est exactement ce que je pense
dans le CLI. Je me suis regardé
dans la manière dont vous pouvez installer leurs components,
et je pense que c'est
exactement ce que je veux, mais je n'ai pas vraiment
le temps pour les
imprimés, je ne sais pas.
Je pense que je vais vous parler de
l'imprimation custom,
c'est assez bon,
c'est super, c'est
le Mac OS,
le iPad cursor,
c'est comme un ballon,
si vous avez des textes sélectables,
il faut que vous
les matchez au niveau des textes,
mais vous ne devez pas utiliser ça,
vous pouvez avoir du contenu custom,
vous pouvez avoir des choses à l'aide du cursor,
et c'est assez bon.
Je dois avoir un component
très bon, c'est le cursor custom,
et ça peut faire des choses comme,
c'est un peu comme
un tablette, un cursor iPad,
ou si vous avez des textes sélectables,
vous pouvez les matcher
au niveau des textes,
et vous pouvez mettre
du contenu custom,
je veux que ça fonctionne ensemble,
c'est juste un start-up,
mais ce que j'espère,
aujourd'hui, il ne sera pas seulement
des utilisateurs d'Ihard,
mais il faut être en position
dans le temps où
il y a beaucoup de
valeur représentée par cette membership,
il y a un no-brainer
pour ne pas acheter.
C'est un domaine très difficile,
et même avec un
un outil très fort,
il y a beaucoup de valeur
pour être ajoutée au space,
je pense
que, si vous pouvez
le garder petit,
il y a beaucoup de successo
dans le futur. Il y a
quelque chose qui est très appuyant
sur le lifestyle
de ce genre de business,
qui est un projet de passion,
qui donne valeur.
Il se termine
un tout différent, si vous commencez
à créer le capital,
et en essayant de le faire
un business
très scalable,
un baisse différent
mais, je pense que
il y a beaucoup d'opportunités
pour vous.
J'espère que ça va.
Je veux le garder de cette façon,
et je suis
très fier de l'avouer
d'avoir un capital
de la même manière.
Parce que c'est un lifestyle que je veux
de la même manière.
Je me suis dit
que je fais toujours le meilleur
de la famille,
quand je peux concentrer
sur quelque chose et vraiment aller pour ça.
Je pense que c'est tout le monde qui
travaille le meilleur. Je ne suis pas vraiment
en train de devenir
un créateur de business
qui ne veut pas
le genre de business,
et je ne suis pas vraiment en train
de faire des trucs ridicules.
Je ne suis pas en train de faire mon empire,
je suis juste en train de
travailler un peu
avec la manière que je pense.
C'est tout ce que je veux faire.
Parce que c'est un objectif
qui devrait être nécessaire
pour arriver.
C'est tout ce que je veux faire.
Quand on parle de l'épisode, on a toujours envie de
poser une question
de la question. Je pense que votre histoire
spécifiquement, où elle s'est étendue
sur le cycle de développement web, est assez intéressant.
Nous avons, comme vous l'avez parlé
de ces très élevés, mais très riches
d'expériences d'animation.
Et puis Flash got killed
essentially, Apple,
surtout en étant, on ne supporte pas
cela sur nos devises.
Et ça a changé le landscape.
Nous avons eu beaucoup moins d'animation,
beaucoup plus difficile à faire.
Vous avez vu cette opportunité
de venir et de construire des libraries.
Nous avons travaillé sur ces années.
Les browsers ont été en train de mieux
et de donner plus de features,
de faire plus de performance,
de faire plus d'opportunités.
Donc,
quand vous regardez
les années de la prochaine,
que pensez-vous que ce sera le plus grand
des choses qui vont changer
dans le space pour faire des animations
plus facilement, plus vite,
ou plus capable ?
Qu'est-ce que le changement de la size
de Flash, que vous pensez
que ça pourrait être sur le horizon ?
Oui, j'espère que
les éditeurs visuels
existent.
C'est difficile de dire,
parce que, premièrement,
je pense que les nôtre-tools,
comme Framer, sont tout.
Je pense que dans les animations UI,
nous avons été à un stage
qui est un peu
le design visuel,
où, en fin de la journée,
j'ai commencé à faire un site Zelda,
et
j'ai spent beaucoup de temps
en faisant tout,
ceci a l'air de la lait,
ceci a l'air de la part de Burn,
tout ceci a un petit
petit choc d'un chuteur.
Vous pouvez imaginer, c'est comme la journée
de Web 2.0, mais je voulais faire
la version Zelda, où c'est
part de la part, et le tactile.
Et maintenant,
nous sommes dans un monde super minimal
où le design visuel
est un peu plus sur la cléité.
Mais, en fait,
c'est pas seulement la cléité,
mais le design d'émotions est aussi un peu
dans ce monde.
Je pense
que
le temps
de les animations
qui sont compliquées
est très néche,
d'implements,
donc, quand vous ouvrez Framer,
vous avez un effectif de hover,
vraiment tout ce que vous faites
est de changer les valeurs,
et c'est un simple A à B
animation, et vous pouvez changer
le sens de l'amélioration
visuellement.
Et je pense que ça va être
90% de... Parce que si je fais
une chose similaire,
il y a quelques années, je fais
des « DevTools » et le temps
a fait un petit overcut,
je sais pas, c'est comme un record,
je sais pas, je vais pas
gesticuler, en cas de
des petits bubbles,
qu'on veut faire.
Le
...
Qu'est-ce que je fais ?
Je pense que le temps
se fait
un overkill
pour la majorité de ce que les gens
font. Alors, c'est un bon visualisation
quand vous vous dévoilez, mais pour la plupart,
c'est pas ce que les gens font, c'est très simple.
Donc, la sensibilité,
c'est que, c'est ce que je dis,
je pense que nous allons finir
en faisant ce type de
« maximum list design trend »
de la texture, je
peux le faire, parce que c'est
comme une pension, mais il y a
quelque chose de ce qui se passe
pour longtemps, que je ressens
que c'est là où nous sommes,
les animations physiques sont
plus et plus, et surtout
les inclinéories, et les CSS.
Mais, c'est une chose incrémentale,
et je ne peux pas, à l'honneur,
vous dire, les glasses AR,
avec le Vision Pro,
comme dans la conversation d'aujourd'hui,
où l'autre personne parle,
je n'ai pas utilisé, mais le
tactile feeling, de l'envers de quelque chose,
et de cliquer les mains et tout,
oui, je pense que les choses comme ça
vont arriver, mais quand,
je me sens que le AR
n'est juste pas là, et ça ne sera pas
pour un bon moment.
Donc, je ne suis pas
en train de dire ça comme si nous sommes en train de rire,
je pense que c'est incroyable,
je pense que les choses vont se faire
plus facilement, et les animations sont
plus subtiles, c'est bien.
Je pense que ça peut être plus de
ces animations, et c'est
plus facile de le performer, et c'est
bien, et pour les gens de
sentir, comme en utilisant plus de
animations spring, c'est
comme ça, c'est
où je veux le voir,
je pense que, oui, je pense que
vous voyez beaucoup de animations,
Apple est toujours très défaite,
avec les choses en faisant, c'est exactement ce que je veux dire,
ils ont des animations
partout, mais ils sont
toujours subtiles et ils se sentent
bien, ils sont rarement
chers, et ça,
je pense, c'est où nous nous
faisons, oui, essentiellement,
en termes d'animation, je ne le vois pas,
mais peut-être que c'est un bon imagination.
Un futur tasteful pour les animations
pour tout, c'est
un bon point, vous devez marcher
avec des animations et des animations
en général, de faire trop
beaucoup avant de le faire et de faire juste
tout, mais ça le rapporte pour notre question.
C'est exactement ce que je veux dire, c'est
comme si c'était une société, on a
went too far, flash,
c'est beaucoup de la love, mais maintenant
c'est pour ça, vous le faites
personnellement, comme tous les artistes
ont cette vie de
aller trop loin, ils le reposent, je pense que
le trend de design est
un peu similaire,
Cool, ça le rapporte pour nos questions
cette semaine, merci pour
venir, c'était un j'ai
fait un j'ai, c'est un
peu de faillite et le mot
fait un peu de succès, donc merci
pour venir et parler de ça.
Merci beaucoup, j'ai vraiment
aimé le tout, merci.
Episode suivant:
Les infos glanées
devtools.fm:DeveloperTools,OpenSource,SoftwareDevelopment
A podcast about developer tools and the people who make them. Join us as we embark on a journey to explore modern developer tooling and interview the people who make it possible. We love talking to the creators front-end frameworks (React, Solid, Svelte, Vue, Angular, etc), JavaScript and TypeScript runtimes (Node, Deno, Bun), Languages (Unison, Elixor, Rust, Zig), web tech (WASM, Web Containers, WebGPU, WebGL), database providers (Turso, Planetscale, Supabase, EdgeDB), and platforms (SST, AWS, Vercel, Netlify, Fly.io).
Tags