Back to videos

Tuto Glass effect, SVG animés et animations JS avec Greensock Animation Platform (GSAP)

Coucou,

Dans ce nouvel épisode de Pimp My Site, on va pas voir une, ni deux mais trois techniques pour Pimper son site web.

  • La première est le GlassMorphisme (glass effect) et permet de mettre en valeur le contenu d'un block HTML. L'idée est d'avoir un arrière plan transparent et de rendre flou ce qui passe au travers pour donner l'impression que l'élément est en verre.

  • La deuxième technique est l'ajout d'SVG animé. J'en ai fait un tutoriel que vous pouvez voir ici https://www.youtube.com/watch?v=lwFwqiGvDQo

Cette fois je vous montre non pas une signature mais comment ça peut venir habiller un site web. (bon je dessine mal alors mon dessin est moche mais vous pouvez faire de belles choses vous !)

  • Et la troisième technique est de complètement contrôler les animations de votre site à l'aide de la librairie JavaScript Greensock Animation Platform (GSAP). Vous découvrirez comment créer une timeline et la contrôler pour qu'elle suive le défilement de la page.

Le rendu final

https://www.wawasensei.dev/tutos/pimp-my-site-gsap/

Le code source pour vous entraîner

https://github.com/wass08/pimp-my-site-gsap

Les liens utiles pour GreenSock Animation Platform

https://greensock.com/docs/

https://greensock.com/docs/v3/Installation

https://greensock.com/docs/v3/GSAP/Timeline

Need help with this tutorial? Join our Discord community!