Description
Créer de belles expériences avec Framer Motion
Les bonnes animations donnent vie aux pages Web, tandis que les animations exagérées peuvent être une distraction. Dans ce cours, je vais vous apprendre l’équilibre parfait, en plongeant profondément dans le monde des animations significatives.
Vous apprendrez non seulement à animer, mais aussi à améliorer l’expérience utilisateur avec élégance. Vos compétences ne passeront pas seulement au niveau supérieur : elles s’y animeront, apportant une touche d’élégance et de fonctionnalité à chaque projet !
Bien que le CSS simple devienne de plus en plus puissant chaque semaine, avec des fonctionnalités étonnantes telles que des animations pilotées par défilement et des transitions de vue, il a toujours ses limites. L’une des plus grandes limitations est que vous ne devez pas animer toutes les propriétés d’un élément. Par exemple, l’animation de propriétés telles que la largeur, la hauteur, le haut ou la gauche peut provoquer des animations saccadées. Il est recommandé de manipuler la taille et la position d’un élément à l’aide de propriétés d’animation telles que TranslateX/Y et Scale.
Mais pourquoi Framer Motion ferait-il cela mieux que le simple CSS?
Framer Motion contient de la ✨ magie ✨, qu’ils appellent des animations de mise en page. Lors de l’utilisation d’animations de mise en page pour redimensionner un élément en largeur/hauteur, Framer Motion utilise des calculs sous le capot, pour convertir ce redimensionnement en échelle et transformer l’animation ?. Il en résulte des animations qui fonctionnent toujours bien mieux que les animations CSS simples — presque sans avoir besoin d’y penser !
Mais cela ne se limite pas à la largeur/hauteur!
Cependant, cette magie ne s’arrête pas aux animations performantes en largeur et en hauteur ! Framer est même capable d’animer des mises en page très complexes les unes dans les autres. Par exemple, animer deux éléments depuis flex-direction:row into row-reverse. Jetez un œil à la magie en action ci-dessous!
Dernière mise à jour 2/2024
Liens de téléchargement
Téléchargement direct
Animer le Web avec Framer Motion.zip (2,7 Go) | Miroir
admin