5 animations Framer pour passer au niveau pro

Deux façons d’animer sur Framer

Framer permet de sortir des sites haut de gamme en peu de temps, et les animations sont son point fort. Beaucoup d’utilisateurs ne s’en servent pas correctement : le site reste statique et ne procure aucune émotion. Une expertise Framer permet pourtant de vendre ses premiers sites plus de 2500 €.

Tout repose sur un choix.

Le panneau d’effets n’agit que sur l’élément sélectionné. Dès qu’une animation touche plusieurs éléments, il faut passer par un composant et ses variantes, comme un prototype Figma.

Le parallaxe au scroll

Le principe tient en trois plans superposés en position absolute, un fond, un sujet, un premier plan, celui qui donne sa hauteur à la section restant en relative. Le z-index gère la profondeur.

Les images sont volontairement plus grandes que la section, 125 % pour le fond, 114 % pour le premier plan : sans cette marge, une bande blanche apparaît au fil du défilement.

L’animation se règle dans les effets, avec le scroll speed. En dessous de 100 %, ici 90 %, le plan défile plus lentement que la page et semble descendre ; au-dessus, 110 % pour les fleurs et pour le texte, il part vers le haut.

Le préloader, en quatre étapes

Le préloader se construit dans un composant : clic droit sur la hero section, create component, une variante par étape.

1. La construction. Une frame préloader en position absolute, z-index 10 (le maximum sur Framer), en 100 % de largeur et de hauteur, en layout horizontal, avec deux panneaux noirs collés. Le logo est placé dans une frame qui l’englobe, sinon toutes les propriétés ne s’y appliquent pas.
2. Étape 1 vers 2. Le logo part d’un scale de 1,3, d’un flou de 20 et d’une opacité à zéro, et revient à son état normal. Attention, une modification sur la variante principale se répercute sur toutes les autres.
3. Étape 3. La largeur des panneaux passe à zéro et le logo disparaît. Pour qu’ils s’écartent vers l’extérieur au lieu de se refermer au centre, la distribution du layout passe en space between.
4. Étape 4. Les panneaux passent en opacité zéro, avec un délai à ajuster.

Les étapes se relient par l’éclair, déclencheur appear, avec un léger délai et une transition spring d’une seconde sans rebond.

L’apparition du contenu se fait au panneau d’effets, pas en variantes. Le titre reçoit une apparition de texte mot par mot, par lettre c’est trop lent, et le reste suit en cascade. Le délai se trouve dans les réglages de spring, et l’effet doit être appliqué sur toutes les variantes.

Titre, mot par mot

2 s

Sous-titre

2,2 s

Navigation

2,4 s

Bouton

2,6 s

Le premier délai n’est pas choisi au hasard : 2 secondes, c’est la durée du préloader.

Micro-animation de bouton et apparition au scroll

Le bouton

Le bouton de départ est simple : une frame en stack horizontal centré, une icône verrouillée à 33 par 33 pixels, un texte, le tout en fit content. L’animation passe par un composant et son état hover, pas par l’effet de survol du panneau, qui ne toucherait que l’élément sélectionné.

Un cercle noir aux dimensions de l’icône est ajouté derrière elle, en position absolute à gauche, calé à 5 pixels du haut et du bas, avec un z-index inférieur. Au survol, il prend 100 % de la largeur avec 5 pixels de marge de chaque côté et le texte passe en blanc. Framer repasse alors l’élément en largeur fixe, ce qui évite que le fond se décale quand le texte change.

L’apparition au scroll

D’abord un ID posé sur la section, dans le panneau de style. L’effet scroll animation propose deux déclencheurs : layer in view, quand l’élément entre dans la fenêtre, ou section in view, qui vise la section nommée. Replay sur no pour ne la jouer qu’une fois, l’animation de sortie retirée, et une entrée simple : un décalage, une opacité à zéro, une seconde, sans rebond. Les éléments secondaires se décalent par le délai, 0,7 puis 0,8, et un overflow visible évite qu’une flèche arrive coupée.

La FAQ animée

La FAQ est une frame contenant un header, la question et son icône, plus une frame de contenu en overflow clip. Ce réglage n’est pas optionnel : sans lui, réduire la hauteur à zéro ne cache rien.

Le bloc devient un composant à deux variantes, close et open. En close, l’icône est droite et noire, le contenu à zéro en hauteur comme en opacité. En open, l’icône pivote et change de couleur, le contenu repasse en fit content et en opacité pleine. Le clic se pose sur le header, pas sur l’icône seule ni sur le bloc entier, pénible à l’usage. Reste à vérifier qu’aucun déclencheur ne s’est dupliqué.

Conclusion

Parallaxe, préloader, micro-animation, apparition au scroll et FAQ : cinq animations bâties sur les mêmes bases, le panneau d’effets pour un élément seul, les variantes de composant pour le reste.