La nuit des musées
web experience * Javascript vanilla-GSAP * 2023
En tant que lead dev pour la nuit européenne des musées, j'ai structuré un projet en JavaScript vanilla pour toute la promo, créé la documentation technique et mis en place les workflows GitHub. J'ai développé des composants UI réutilisables avec une approche orientée objet et conçu le hub central connectant toutes les expériences.
La nuit des musées
Dans le cadre de la nuit européenne des musées, notre promo a eu à réaliser des expériences interactives pour une installation du Musée des Beaux-Arts de Bordeaux.Pour ce projet, je faisais partie du groupe d’organisation et j’ai donc, pendant 2 semaines, occupé le rôle de lead dev.Après discussion, nous avons choisi d’utiliser du JavaScript vanilla.J’ai donc rédigé un README détaillant l’architecture du projet, notre méthode de travail avec les branches GitHub, et les bonnes pratiques à suivre.Étant donné que nous avions des éléments d’UI communs, je me suis occupé de les développer en utilisant des classes afin que chaque groupe puisse les étendre en fonction de leurs besoins.En plus de cela, je me suis occupé de développer le Hub qui redirige vers les expériences.
Tools
Dans ce projet, j'ai utilisé beaucoup d'animations différentes. Pour le slider du Hero, j'ai utilisé pas mal de timeline GSAP, afin d'ajouter plusieurs effets en fonction d'une condition et ajouter du délai sur une timeline entière.Pour la section de la description ou la graisse de la font augmente en fonction du scroll, je me suis servi du “ScrollYProgress” de framer-motion après avoir split ma description et placé toutes mes lettres dans des span que j'ai ensuite sélectionné avec un querySelectorAll pour les animer.