Architect Gallery

website * NextJs-GSAP-Framer-motion * 2023

Mon premier projet de creative coding réaliser à partir de zéro ! À partir d’une animation trouvée sur Dribble, j’ai designé et développer une landing page complète afin de valider mon apprentissage de GSAP et Framer-motion.

Architect Gallery

Après avoir appris les bases des librairies Javascript d’animation à l’aide de plusieurs tutoriels, il me fallait un projet pour mettre tout cela en application. J’ai donc commencé par chercher de l’inspiration sur des sites comme awwwards, dribble… Après avoir trouvé une animation d’hero qui me plaisait ainsi qu’un sujet pour mon site, j’ai designé sur Figma le reste de la page. Pour ce qui est du développement, j’ai utilisé Next.js pour fonctionner en component, et pour les animations, j'ai utilisé GSAP où framer-motion en fonction du besoin.

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.