Un site anniversaire pour célébrer les 20 ans de Symfony !
Publié le 15 octobre 2025
Pour fêter les 20 ans du framework Symfony, nous avons conçu en étroite collaboration avec ses créateurs un site immersif retraçant deux décennies d’évolution. Pour ce site anniversaire, nous sommes partis sur une timeline complètement pilotée par le scroll, et un style graphique inspiré du logo événementiel spécialement créé pour l’occasion.
#Stack technique
- GSAP pour les animations, avec son plugin ScrollTrigger, super pratique pour synchroniser le scroll avec des animations.
- Symfony + Twig pour le rendu côté serveur.
- Une première version du projet avait été réalisée avec Astro (pour son build statique rapide), mais il nous a semblé plus logique et symbolique de construire un site sur les 20 ans de Symfony... avec Symfony !
- TailwindCSS pour le style (parce qu’ici on est toujours aussi fans de ce framework CSS)
- WebP pour les images, afin de combiner transparence et performance (si vous vivez dans une grotte et que vous ne vous êtes pas encore intéressés à ce format d’image… faites-le, les gains en poids de fichier sont vraiment impressionnants !)
Objectif de l’animation
Chaque section de la timeline représente une année ou une étape marquante de l’histoire de Symfony. Plutôt qu’un simple défilement vertical, notre but était que l’utilisateur "plonge" visuellement dans chacune des années : les blocs entrent et sortent de l’écran avec une animation fluide, renforçant l’effet narratif de la timeline.
Problématiques rencontrées
Animer chaque section individuellement est vite devenu coûteux en ressources, surtout sur une timeline aussi longue. Voici quelques optimisations que nous avons mises en place :
- Conversion d’un SVG complexe en WebP : le logo des 20 ans contenait un filtre SVG qui affectait grandement les performances lors des animations. En le convertissant en WebP, nous avons obtenu un gain de fluidité très significatif, sans perte visuelle (on vous a dit qu’on adorait ce format ?)
- Passage de top/left à transform: translate. Initialement, les animations utilisaient top et left, mais ces propriétés forçaient des recalculs de mise en page (reflows) coûteux. En passant sur
transform: translate, on a évité ce problème et gagné en fluidité, les navigateurs pouvant mieux optimiser ce type d’animations (souvent via le GPU). - Utilisation d’autoAlpha au lieu de opacity. Cette propriété de GSAP combine l’opacité et la visibilité. Résultat : les éléments complètement transparents sont aussi retirés de l’affichage, ce qui évite certains soucis de superposition dans le DOM et garantit une animation plus propre.
- Scroll raccourci pour les sauts d’années. Lorsque l’utilisateur clique sur la timeline pour passer plusieurs années d’un coup, on ne pouvait pas se contenter d’un scroll "normal" : défiler toutes les sections une par une aurait été lourd visuellement (et l’animation ultra rapide des rectangles colorés aurait risqué de provoquer une crise d'épilepsie à nos utilisateurs).
On a donc mis en place une logique en trois temps :
- Scroll fluide vers une position intermédiaire, en masquant progressivement toutes les sections
- Saut instantané et “invisible” vers une position proche de la cible
- Scroll fluide final jusqu’à l’année choisie.
Cela nous a permis de préserver la fluidité tout en évitant les glitches de layout et les flashs d’animation.
- Confettis finaux : pour la célébration finale, nous avons opté pour la librairie canvas-confetti. Légère, simple à intégrer et suffisamment flexible pour être customisée, elle s’est avérée parfaite pour finaliser notre animation en beauté.
Le développement de la navigation section par section nous a permis de découvrir un comportement spécifique à Firefox. Contrairement à Chrome ou Safari, Firefox introduit parfois de légers décalages dans le scroll vertical, même quand on tente de scroller vers des positions théoriquement "propres" (multiples exacts de la hauteur d’écran). Ce comportement est sans doute lié au scroll asynchrone de Firefox (d’ailleurs celui-ci nous prévient avec un warning dans la console du navigateur : Ce site semble utiliser un effet de positionnement lié au défilement. Cet effet pourrait ne pas fonctionner correctement avec le défilement asynchrone. Consultez https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html pour obtenir davantage de détails ou discuter des outils et des fonctionnalités liés.)
Résultat : un décalage de quelques pixels pouvait suffire à rendre certaines animations saccadées, parfois avec un léger effet de rebond, notamment lors du saut entre plusieurs années. Dans certains cas, un écran vide pouvait apparaître parce que l’année en cours était mal calculée à cause de ce décalage de pixels.
Pour contourner ce problème, nous avons ajouté une étape de correction manuelle du scroll lorsqu’il est proche d’une bordure d’écran (à moins de 30 pixels). Dans ce cas, le scroll est ajusté sur un multiple exact de la hauteur d’écran avant de lancer l’animation.
const mod = currentScrollY % screenHeight;
const threshold = 30;
if (mod <= threshold || screenHeight - mod <= threshold) {
currentScrollY = direction > 0
? Math.floor(currentScrollY / screenHeight) * screenHeight
: Math.ceil(currentScrollY / screenHeight) * screenHeight;
}Ce petit ajustement assure un point de départ parfaitement aligné, ce qui élimine les défauts d’animation propres à Firefox tout en restant invisible pour l’utilisateur.
Conclusion
Ce projet a été l’occasion d’expérimenter de nouvelles approches autour du scroll animé, tout en rendant hommage à un framework qui accompagne notre coopérative depuis près de 15 ans. Avec cette timeline, nous avons voulu apporter notre pierre à l’édifice et participer, à notre manière, à la célébration des 20 ans de Symfony et aussi rappeler que notre équipe UX/UI conçoit des expériences web complètes, alliant design et technologie de pointe.
Nous couvrons l’ensemble du parcours utilisateur : audit, cartographie des parcours, wireframes, prototypes... N'hésitez pas à nous contacter si vous souhaitez discuter d'un projet que nous pourrions concevoir ensemble !
