Gsap

Dev front

Un site anniversaire pour célébrer les 20 ans de Symfony ! | Les-Tilleuls.coop

Pour fêter les 20 ans de Symfony, un site immersif a été développé avec une timeline interactive et des animations adaptées. La technologie GSAP, avec son plugin ScrollTrigger, a permis de synchroniser le défilement avec les animations. Des optimisations ont été faites pour améliorer les performances, comme la conversion d'images au format WebP ou la méthode transform: translate pour les animations. Ce projet a aussi mis en lumière certains comportements spécifiques de Firefox par rapport au scroll. L'ensemble vise à célébrer l'évolution de Symfony tout en offrant une expérience utilisateur fluide et engageante.

les-tilleuls.coop

gsap
Dev front

GSAP In Practice: Avoid The Pitfalls

Cet article aborde les défis rencontrés lors de l'utilisation de la librairie d'animation GSAP pour améliorer une page d'accueil avec des éléments dynamiques. Il traite des problèmes de compatibilité SVG, de la gestion des animations basées sur le défilement, de l'évitement du Flash Of Unstyled Content (FOUC), ainsi que de l'adaptation des animations pour mobile. Des solutions pratiques sont fournies pour chaque problème afin de faciliter l'animation sur le web.

marmelab.com

gsap
Dev front

Trigger Animations On Scroll With GSAP

Cet article explique comment utiliser la bibliothèque d'animations GSAP pour déclencher des animations au défilement. Il présente des concepts clés tels que l'utilisation de plugins pour animer les éléments uniquement lorsqu'ils deviennent visibles à l'écran. Les options comme 'trigger', 'start', et 'scrub' permettent de contrôler quand et comment les animations se déclenchent et se terminent, offrant ainsi des effets créatifs et interactifs lors du défilement de la page.

marmelab.com

gsap
Dev front

GSAP Basics: Dive into Web Animations

Cet article présente les bases de GSAP (GreenSock Animation Platform), une bibliothèque JavaScript permettant de créer des animations web complexes et performantes. Il aborde les concepts clés tels que les 'tweens' et les 'timelines', tout en fournissant des exemples pratiques de syntaxe pour animer des éléments de façon fluide et contrôlée. GSAP est mis en avant pour sa facilité d'utilisation et ses fonctionnalités avancées, rendant l'animation plus accessible aux développeurs.

marmelab.com

gsap