Avant que ma carrière ne se lance dans le développement, j'ai fait un tas de travaux d'animation graphique dans After Effects. Mais même avec ce bagage, je trouvais toujours que l'animation sur le Web était assez déconcertante.
Les graphiques vidéo sont conçus dans un rapport spécifique, puis exportés. Fait! Mais il n'y a pas de "paramètres d'exportation" sur le Web. Nous ne faisons que pousser le code dans le monde et nos animations doivent s'adapter à n'importe quel appareil sur lequel elles atterrissent.
Alors parlons animation responsive ! Comment aborder au mieux l'animation sur le Web sauvage ? Nous allons couvrir quelques approches générales, quelques conseils spécifiques au GSAP et quelques principes de mouvement. Commençons par un peu de cadrage…
Comment cette animation sera-t-elle utilisée ?
L'article de Zach Saucier sur l'animation responsive recommande de prendre du recul pour réfléchir au résultat final avant de se lancer dans le code.
L'animation sera-t-elle un module répété dans plusieurs parties de votre application ? A-t-il besoin d'évoluer du tout? Garder cela à l'esprit peut aider à déterminer la méthode de mise à l'échelle d'une animation et vous éviter de gaspiller vos efforts.
C'est un excellent conseil. UN majeur une partie de la conception d'une animation réactive consiste à savoir si et comment cette animation doit être mise à l'échelle, puis à choisir la bonne approche dès le départ.
La plupart des animations appartiennent aux catégories suivantes :
- Fixé: Animations pour des éléments tels que des icônes ou des chargeurs qui conservent la même taille et le même rapport d'aspect sur tous les appareils. Aucun soucis à se faire ici! Codez en dur certaines valeurs de pixel et continuez votre journée.
- Fluide: Des animations qui doivent s'adapter de manière fluide sur différents appareils. La plupart des animations de mise en page entrent dans cette catégorie.
- Ciblé: Animations spécifiques à un certain appareil ou à une certaine taille d'écran, ou qui changent considérablement à un certain point d'arrêt, telles que les animations de bureau uniquement ou les interactions qui reposent sur une interaction spécifique à l'appareil, comme le toucher ou le survol.
Des animations fluides et ciblées nécessitent des façons de penser et des solutions différentes. Nous allons jeter un coup d'oeil…
Animation fluide
As Andy cloche dit: Soyez le mentor du navigateur, pas son micro-gestionnaire - donnez au navigateur des règles et des conseils solides, puis laissez-le prendre les bonnes décisions pour les personnes qui le visitent.
(Voici les diapositives de cette présentation.)
L'animation fluide consiste à laisser le navigateur faire le travail acharné. De nombreuses animations peuvent facilement s'adapter à différents contextes simplement en utilisant les bonnes unités dès le départ. Si vous redimensionnez ce stylo, vous pouvez voir que l'animation utilisant unités de fenêtre évolue de manière fluide au fur et à mesure que le navigateur s'ajuste :
La boîte violette change même de largeur à différents points d'arrêt, mais comme nous utilisons des pourcentages pour la déplacer, l'animation évolue également avec elle.
Animation des propriétés de mise en page telles que left ainsi que top peut provoquer des redistributions de la mise en page et une animation "janky" saccadée, donc, dans la mesure du possible, s'en tenir aux transformations et à l'opacité.
Nous ne sommes cependant pas limités à ces unités - examinons d'autres possibilités.
Unités SVG
L'une des choses que j'aime dans le travail avec SVG est que nous pouvons utiliser des unités utilisateur SVG pour l'animation qui sont réactives prêtes à l'emploi. L'indice est vraiment dans le nom - Evolutif Graphique vectoriel. Dans SVG-land, tous les éléments sont tracés à des coordonnées spécifiques. L'espace SVG est comme un morceau infini de papier millimétré où nous pouvons organiser les éléments. La viewBox définit les dimensions du papier millimétré que nous pouvons voir.
viewBox="0 0 100 50”Dans cette prochaine démo, notre SVG viewBox is 100 unités de large et 50 unités de hauteur. Cela signifie que si nous animons l'élément en 100 unités le long de l'axe des x, il se déplacera toujours de toute la largeur de son SVG parent, peu importe la taille de ce SVG ! Donnez à la démo un redimensionnement pour voir.
L'animation d'un élément enfant en fonction de la largeur d'un conteneur parent est un peu plus délicate dans HTML-land. Jusqu'à présent, nous devions saisir la largeur du parent avec JavaScript, ce qui est assez facile lorsque vous animez from une position transformée, mais un peu plus délicate lorsque vous animez to quelque part comme vous pouvez le voir dans la démo suivante. Si votre point final est une position transformée et que vous redimensionnez l'écran, vous devrez ajuster manuellement cette position. Désordonné… 🤔
Si vous ajustez les valeurs lors du redimensionnement, n'oubliez pas de rebondir, ou même déclencher la fonction une fois le redimensionnement du navigateur terminé. Les écouteurs de redimensionnement déclenchent une tonne d'événements chaque seconde, donc la mise à jour des propriétés de chaque événement représente beaucoup de travail pour le navigateur.
Mais ce ralentisseur d'animation appartiendra bientôt au passé ! Roulement de tambour s'il vous plaît… 🥁
Unités de conteneur ! Des trucs adorables. Au moment où j'écris ceci, ils ne fonctionnent que dans Chrome et Safari - mais peut-être qu'au moment où vous lirez ceci, nous aurons Firefox aussi. Découvrez-les en action dans cette prochaine démo. Regardez ces petits gars aller! N'est-ce pas excitant, une animation relative aux éléments parents !
Ces données de prise en charge du navigateur proviennent de Puis-je utiliser, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité à partir de cette version.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 105 | Non | Non | 105 | 16.0 |
Mobile / Tablette
| Android Chrome | Firefox Android | Android | iOS Safari |
|---|---|---|---|
| 106 | Non | 106 | 16.0 |
Transitions de mise en page fluides avec FLIP
Comme nous l'avons mentionné précédemment, dans SVG-land, chaque élément est soigneusement placé sur une grille et très facile à déplacer de manière réactive. En HTML, c'est beaucoup plus complexe. Afin de créer des mises en page réactives, nous utilisons un ensemble de méthodes de positionnement et de systèmes de mise en page différents. L'une des principales difficultés de l'animation sur le web est que beaucoup des changements de mise en page sont impossibles à animer. Peut-être qu'un élément doit changer de position relative à fixed, ou certains enfants d'un conteneur flexible doivent être mélangés en douceur autour de la fenêtre d'affichage. Peut-être qu'un élément doit même être re-parenté et déplacé vers une toute nouvelle position dans le DOM.
Tricky, hein?
Bien. La technique FLIP est là pour sauver la situation ; il nous permet d'animer facilement ces choses impossibles. Le postulat de base est :
- Prénom: Saisissez la position initiale des éléments impliqués dans la transition.
- Nom de famille: Déplacez les éléments et saisissez la position finale.
- Inverser: déterminez les changements entre le premier et le dernier état et appliquez des transformations pour inverser les éléments à leur position d'origine. Cela donne l'impression que les éléments sont toujours dans le premier position, mais ils ne sont en fait pas.
- Jouez: Supprimez les transformations inversées et animez à leur simulé premier état à la dernier Etat.
Voici une démo utilisant le plugin FLIP de GSAP qui fait tout le gros du travail pour vous !
Si vous voulez en savoir un peu plus sur la mise en œuvre de la vanille, rendez-vous sur Paul Lewis's blog récents - il est le cerveau derrière la technique FLIP.
SVG à mise à l'échelle fluide
Tu m'as... ce n'est pas vraiment une astuce d'animation. Mais une mise en scène correcte est impérative pour une bonne animation ! SVG s'adapte très bien par défaut, mais nous pouvons contrôler comment il évolue encore plus avec preserveAspectRatio, ce qui est très pratique lorsque le rapport d'aspect de l'élément SVG et le viewBox les proportions sont différentes. Il fonctionne à peu près de la même manière que le background-position ainsi que background-size propriétés en CSS. La déclaration est composée d'une valeur d'alignement (background-position) Et un Découvrez or Tranche référence (background-size).
Quant à ces références Meet and Slice - slice c'est comme background size: coveret meet c'est comme background-size: contain.
preserveAspectRatio="MidYMax slice"— Alignez au milieu de l'axe des x, au bas de l'axe des y et redimensionnez pour couvrir toute la fenêtre.preserveAspectRatio="MinYMin meet"— Alignez à gauche de l'axe des x, le haut de l'axe des y et agrandissez tout en conservant l'ensembleviewBoxvisible
Tom Miller va encore plus loin en utilisant overflow: visible en CSS et un élément contenant pour révéler "stage left" et "stage right" tout en gardant la hauteur restreinte :
Pour les animations SVG réactives, il peut être pratique d'utiliser la fenêtre SVG pour créer une vue qui recadre et redimensionne sous une certaine largeur de navigateur, tout en révélant davantage l'animation SVG à droite et à gauche lorsque le navigateur est plus large que cela. au seuil. Nous pouvons y parvenir en ajoutant un débordement visible sur le SVG et en l'associant à un
max-heightwrapper pour empêcher le SVG de trop se mettre à l'échelle verticalement.
Toile à mise à l'échelle fluide
Canvas est beaucoup plus performant pour les animations complexes avec beaucoup de pièces mobiles que d'animer SVG ou HTML DOM, mais c'est aussi intrinsèquement plus complexe. Vous devez travailler pour ces gains de performance ! Contrairement à SVG qui a de belles unités réactives et une mise à l'échelle prête à l'emploi, doit être dirigé et un peu microgéré.
J'aime installer mon de sorte qu'il fonctionne à peu près de la même manière que SVG (je suis peut-être biaisé) avec un joli système d'unités dans lequel travailler et un rapport d'aspect fixe. doit également être redessiné à chaque fois que quelque chose change, alors n'oubliez pas de retarder le redessin jusqu'à ce que le navigateur ait fini de redimensionner, ou de rebondir !
George Francis également mis en place ce jolie petite bibliothèque qui permet de définir un Canvas viewBox attribuer et preserveAspectRatio — exactement comme SVG !
Animation ciblée
Vous devrez parfois adopter une approche moins fluide et plus dirigée de votre animation. Les appareils mobiles ont beaucoup moins d'espace et moins de performances en termes de jus d'animation qu'un ordinateur de bureau. Il est donc logique de proposer une animation réduite aux utilisateurs mobiles, voire aucune animation :
Parfois, la meilleure animation réactive pour mobile n'est pas du tout une animation ! Pour l'expérience utilisateur mobile, privilégiez le fait de laisser l'utilisateur consommer rapidement du contenu plutôt que d'attendre que les animations se terminent. Les animations mobiles doivent améliorer le contenu, la navigation et les interactions plutôt que de les retarder. Éric van Holtz
Pour ce faire, nous pouvons utiliser des requêtes multimédias pour cibler des tailles de fenêtres spécifiques, tout comme nous le faisons lorsque nous stylisons avec CSS ! Voici une démonstration simple montrant une animation CSS gérée à l'aide de requêtes multimédias et une animation GSAP gérée avec gsap.matchMedia():
La simplicité de cette démo cache un tas de magie ! Les animations JavaScript nécessitent un peu plus de configuration et de nettoyage afin de fonctionner correctement sur une seule taille d'écran spécifique. J'ai vu des horreurs dans le passé où les gens venaient de cacher l'animation de la vue en CSS avec opacity: 0, mais l'animation continue de s'écouler en arrière-plan, ce qui consomme des ressources. 😱
Si la taille de l'écran ne correspond plus, l'animation doit être supprimée et libérée pour la récupération de place, et les éléments affectés par l'animation doivent être effacés de tout style en ligne introduit par le mouvement afin d'éviter les conflits avec d'autres styles. Jusqu'à gsap.matchMedia(), ce fut un processus fastidieux. Nous devions garder une trace de chaque animation et gérer tout cela manuellement.
gsap.matchMedia() à la place vous permet de rentrer facilement votre code d'animation dans une fonction qui ne s'exécute que lorsqu'un requête média allumettes. Puis, lorsqu'il ne correspond plus, toutes les animations GSAP et Déclencheurs de défilement dans cette fonction sont automatiquement annulés. La requête multimédia dans laquelle les animations sont insérées fait tout le travail pour vous. C'est dans GSAP 3.11.0 et ça change la donne !
Nous ne sommes pas seulement limités aux tailles d'écran non plus. Il y a un tonne de fonctionnalités multimédias là-bas s'accrocher !
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */Dans la démo suivante, nous avons ajouté une vérification pour prefers-reduced-motion afin que les utilisateurs qui trouvent l'animation désorientante ne soient pas dérangés par les choses qui tournent autour.
Et découvrez l'autre démo amusante de Tom Miller dans laquelle il utilise le format d'image de l'appareil pour ajuster l'animation :
Sortir des sentiers battus, au-delà des tailles d'écran
Penser à une animation réactive ne se limite pas aux tailles d'écran. Différents appareils permettent différentes interactions, et il est facile de s'emmêler un peu quand on ne tient pas compte de cela. Si vous créez des états de survol en CSS, vous pouvez utiliser le hover fonction multimédia pour tester si l'utilisateur primaire le mécanisme de saisie peut survoler les éléments.
@media (hover: hover) {
/* CSS hover state here */
}Quelques conseils de Jake Whiteley:
La plupart du temps, nous basons nos animations sur la largeur du navigateur, en supposant naïvement que les utilisateurs de bureau veulent des états de survol. J'ai personnellement eu beaucoup de problèmes dans le passé où je passais à la disposition du bureau> 1024px, mais je pouvais faire une détection tactile dans JS - conduisant à une incompatibilité où la disposition était pour les ordinateurs de bureau, mais le JS était pour les mobiles. Ces jours-ci, je m'appuie sur le survol et le pointeur pour assurer la parité et gérer les ipad Pros ou les surfaces Windows (qui peuvent changer le type de pointeur selon que la couverture est baissée ou non)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Je vais ensuite marier mes requêtes de mise en page CSS et mes requêtes JavaScript, donc je considère le périphérique d'entrée comme le facteur principal soutenu par largeur, plutôt que l'inverse.
Astuces ScrollTrigger
Si vous utilisez GSAP Plugin ScrollTrigger, il existe un petit utilitaire pratique auquel vous pouvez vous connecter pour discerner facilement les capacités tactiles de l'appareil : ScrollTrigger.isTouch.
0- pas touche (pointeur/souris uniquement)1- tactile uniquement appareil (comme un téléphone)2– l'appareil peut accepter -nous entrée et souris/pointeur (comme les tablettes Windows)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}Une autre astuce pour une animation réactive déclenchée par défilement…
La démonstration suivante ci-dessous déplace une galerie d'images horizontalement, mais la largeur change en fonction de la taille de l'écran. Si vous redimensionnez l'écran lorsque vous êtes à mi-chemin d'une animation nettoyée, vous pouvez vous retrouver avec des animations brisées et des valeurs obsolètes. Il s'agit d'un ralentisseur courant, mais qui se résout facilement ! Insérez le calcul qui dépend de la taille de l'écran dans une valeur fonctionnelle et définissez invalidateOnRefresh:true. De cette façon, ScrollTrigger recalculera cette valeur pour vous lorsque le navigateur se redimensionnera.
Astuce de nerd GSAP en prime !
Sur les appareils mobiles, la barre d'adresse du navigateur s'affiche et se masque généralement lorsque vous faites défiler. Cela compte comme un événement de redimensionnement et déclenchera un ScrollTrigger.refresh(). Ce n'est peut-être pas idéal car cela peut provoquer des sauts dans votre animation. GSAP 3.10 ajouté ignoreMobileResize. Cela n'affecte pas le comportement de la barre du navigateur, mais cela empêche ScrollTrigger.refresh() de tirer pour petits redimensionnements verticaux sur les appareils tactiles uniquement.
ScrollTrigger.config({
ignoreMobileResize: true
});Principes de mouvement
J'ai pensé vous laisser avec quelques bonnes pratiques à prendre en compte lorsque vous travaillez avec le mouvement sur le Web.
Distance et assouplissement
Une petite mais importante chose qu'il est facile d'oublier avec une animation réactive est la relation entre la vitesse, l'élan et la distance ! Bonne animation devrait imiter le monde réel pour se sentir crédible, et il faut plus de temps dans le monde réel pour couvrir une plus grande distance. Faites attention à la distance parcourue par votre animation et assurez-vous que la durée et l'accélération utilisées ont un sens dans le contexte des autres animations.
Vous pouvez également souvent appliquer un assouplissement plus spectaculaire aux éléments avec un déplacement plus long pour montrer l'élan accru :
Pour certains cas d'utilisation, il peut être utile d'ajuster la durée de manière plus dynamique en fonction de la largeur de l'écran. Dans cette prochaine démo, nous utilisons gsap.utils pour fixer la valeur que nous récupérons du courant window.innerWidth dans une plage raisonnable, nous mappons ce nombre sur une durée.
Espacement et quantité
Une autre chose à garder à l'esprit est l'espacement et la quantité d'éléments à différentes tailles d'écran. Citation Steven Shaw:
Si vous avez une sorte d'animation environnementale (parallaxe, nuages, arbres, confettis, décorations, etc.) qui sont espacées autour de la fenêtre, assurez-vous qu'elles sont mises à l'échelle et/ou ajustent la quantité en fonction de la taille de l'écran. Les grands écrans ont probablement besoin de plus d'éléments répartis, tandis que les petits écrans n'en ont besoin que de quelques-uns pour le même effet.
J'aime comment Opher Vishnia considère l'animation comme une scène. L'ajout et la suppression d'éléments ne doivent pas seulement être une formalité, cela peut faire partie de la chorégraphie globale.
Lors de la conception d'animations réactives, le défi n'est pas de savoir comment entasser le même contenu dans la fenêtre d'affichage pour qu'il "tienne", mais plutôt comment organiser l'ensemble du contenu existant afin qu'il communique la même intention. Cela signifie faire un choix conscient du contenu à ajouter et de celui à supprimer. Habituellement, dans le monde de l'animation, les choses ne se contentent pas d'entrer ou de sortir du cadre. Il est logique de penser aux éléments comme entrant ou sortant de la "scène", animant cette transition d'une manière qui a un sens visuel et thématique.
Et c'est tout. Si vous avez d'autres conseils d'animation réactifs, mettez-les dans la section des commentaires. S'il y a quelque chose de super utile, je les ajouterai à ce recueil d'informations !
Addenda
Une autre note de Tom Miller alors que je préparais cet article :
Je suis probablement trop en retard avec cette astuce pour votre article sur les animations réactives, mais je recommande fortement de "finaliser toutes les animations avant de créer". Je modernise actuellement certaines animations du site avec des "versions mobiles". Dieu merci pour
gsap.matchMedia… mais j'aurais bien aimé savoir qu'il y aurait des mises en page/animations mobiles distinctes depuis le début.
Je pense que nous apprécions tous que cette astuce pour "planifier à l'avance" soit venue à la dernière minute. Merci, Tom, et bonne chance avec ces rénovations.
