Animer une interface sans la ralentir
Transforms, opacité, reduced motion : les règles que je suis pour des animations fluides avec Motion et Lenis.
18 juin 2026 · 1 min de lecture
Une animation réussie se remarque à peine. Une animation qui saccade, en revanche, se remarque tout de suite.
Animer les bonnes propriétés
transform et opacity sont gérés par le GPU. Animer width, top ou margin force le navigateur à recalculer la mise en page à chaque image.
<motion.div
initial={{ opacity: 0, y: 18 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, ease: [0.22, 0.7, 0.2, 1] }}
/>Respecter les préférences
Certaines personnes demandent à réduire les animations dans leur système. Avec Motion, une ligne suffit :
<MotionConfig reducedMotion="user">{children}</MotionConfig>Mes règles
- Des durées courtes, entre 150 et 600 ms
- Une animation doit montrer un changement, pas décorer
- Toujours tester sur un téléphone d’entrée de gamme
La fluidité, c’est une fonctionnalité.