Cette page présente les Scroll-Driven Animations, une nouvelle API CSS permettant de créer des animations déclenchées par le défilement, sans JavaScript. L’idée centrale est d’associer des animations existantes (comme @keyframes) à une progression de défilement plutôt qu’à une durée fixe, simplifiant ainsi les effets visuels dynamiques. L’auteur, Josh W. Comeau, illustre ce concept avec des exemples concrets et détaille son fonctionnement, tout en mentionnant les limites actuelles, notamment un support partiel des navigateurs (85 % selon Can I Use, avec Firefox nécessitant un flag).
L’article s’adresse aux développeurs familiarisés avec les animations CSS et explore des fonctionnalités avancées comme les timelines liés ou les plages d’animation personnalisées. Il aborde aussi les pièges à éviter et propose des solutions de contournement, comme un polyfill imparfait. Malgré un support encore incomplet, l’auteur encourage son adoption pour des améliorations cosmétiques, anticipant une généralisation prochaine, notamment dans Firefox.
Enfin, la page s’inscrit dans un contexte plus large, avec une mention de la sortie récente d’un cours de l’auteur sur les animations, bien que le contenu principal se concentre sur l’API elle-même. Les exemples interactifs permettent de tester les possibilités offertes par cette technologie émergente.
Découvrez comment combiner les animations scroll-driven et la propriété CSS corner-shape pour créer des effets visuels innovants, comme des coins qui se transforment en carrés ou en encoches au fil du défilement. L’article explique comment utiliser superellipse() pour générer des formes mathématiques animables (squircle, bevel, notch, etc.) et propose un exemple concret avec un pseudo-élément body::before et un mix de mix-blend-mode: difference. À noter : ces fonctionnalités nécessitent Chrome 139+ et Firefox devrait bientôt les supporter nativement. Une démo visuelle est incluse pour illustrer le résultat.
Présentation de quatre fonctionnalités CSS modernes qui permettent de gérer des animations et interactions avancées directement dans le navigateur, réduisant fortement le besoin de JavaScript. L’article met notamment en avant View Transitions, qui permet de créer facilement des transitions animées entre pages ou états d’interface, et Scroll-Driven Animations, qui synchronisent les animations avec la position de défilement pour réaliser des effets comme le parallaxe ou l’apparition d’éléments. Il explique aussi animation-composition, qui combine plusieurs transformations sans écraser les valeurs existantes, et @property, qui introduit des variables CSS typées et animables, rendant possibles des transitions fluides sur des propriétés complexes comme les dégradés ou les couleurs.
Les-Tilleuls.coop a conçu un site immersif pour célébrer les 20 ans de Symfony, basé sur une timeline interactive pilotée par le scroll, avec un design inspiré du logo anniversaire. Chaque section représente une année clé, avec des animations fluides pour plonger l’utilisateur dans l’histoire du framework. Les défis techniques incluaient l’optimisation des performances (chargement progressif des animations) et la gestion des décalages de scroll sous Firefox (corrigés via un ajustement manuel du positionnement). Un projet alliant narratif visuel et expertise UX/UI, pour rendre hommage à un outil central dans leur quotidien depuis 15 ans.
Tout est dans le titre : ça parle de scroll driven animation
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre