Qu'est-ce que GSAP ?

Qu'est-ce que GSAP ?

GSAP (GreenSock Animation Platform) est une bibliothèque JavaScript puissante pour créer des animations performantes et fluides sur le web.

Optimisé pour les performances

Compatible avec tous les navigateurs modernes

Facile à intégrer avec HTML, CSS et SVG

Idéal pour les animations complexes et interactives

Pourquoi utiliser GSAP ?

Pourquoi utiliser GSAP ?

GSAP est incontournable pour les animations web grâce à ses fonctionnalités puissantes et ses performances inégalées.

Animations fluides et performantes

Orchestration facile avec les timelines

Support natif des SVG, Canvas, et DOM

Extensible avec des plugins comme ScrollTrigger

Compatibilité multiplateforme (mobile & desktop)

Comment fonctionne GSAP ?

Comment fonctionne GSAP ?

GSAP repose sur trois concepts principaux pour créer des animations puissantes :

Tween : Animation d'une propriété (position, rotation, etc.)

Timeline : Orchestration de plusieurs tweens

Plugins : Extensions pour des fonctionnalités avancées (ex. ScrollTrigger)

Exemple de code pour une animation simple :

                    
                        gsap.to(".box", {
                          x: 200,
                          rotation: 360,
                          duration: 2
                        });
                    
                

Voici un exemple pas à pas d'une animation avec GSAP

Commençons par l'HTML

                    


    

        
Bienvenue dans GSAP
    
    

        

        

        

    
    

        

        

        

        

    

Jouer l'animation

                    
                

Ensuite le CSS

                    
body {
    background: black;
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.portal {
    position: relative;
    width: 300px;
    height: 300px;
}

.circle {
    width: 100px;
    height: 100px;
    border: 4px solid white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.portal-text {
    text-align: center;
    font-size: 16px;
    color: white;
    opacity: 0;
}

.shapes .shape {
    width: 20px;
    height: 20px;
    background: white;
    position: absolute;
    border-radius: 50%;
}

.particles .particle {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #ff7eb3, #ff758c, #ff5e73);
    position: absolute;
    border-radius: 50%;
    opacity: 0;
}

#play-animation {
    margin-top: 20px;
    padding: 10px 20px;
    background: linear-gradient(to right, #ff758c, #ff7eb3);
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#play-animation:hover {
    background: linear-gradient(to right, #ff7eb3, #ff5e73);
}
                    
                

Enfin, le Javascript

                    
// Timeline GSAP
const timeline = gsap.timeline({ defaults: { ease: "power2.out", paused: false } });

// Animation du cercle central
timeline.fromTo(
    ".circle",
    { scale: 0, opacity: 0 },
    { scale: 1, opacity: 1, duration: 1.5 }
);

// Animation des formes géométriques en rotation autour du cercle
timeline.fromTo(
    ".shapes .shape",
    { scale: 0, x: 0, y: 0 },
    {
            scale: 1,
            x: (i) => 100 * Math.cos((i * Math.PI) / 3),
            y: (i) => 100 * Math.sin((i * Math.PI) / 3),
            stagger: 0.2,
            duration: 1,
    },
    "<"
);

// Animation des particules
timeline.fromTo(
    ".particles .particle",
    { opacity: 0, scale: 0 },
    {
            opacity: 1,
            scale: 1.5,
            x: () => Math.random() * 200 - 100,
            y: () => Math.random() * 200 - 100,
            stagger: 0.1,
            duration: 0.8,
    },
    "-=1"
);

// Révélation du texte
timeline.fromTo(
    ".portal-text",
    { opacity: 0, scale: 0.5 },
    { opacity: 1, scale: 1, duration: 1 },
    "-=0.5"
);

// Effet de disparition
timeline.to(".portal", { opacity: 0, scale: 0.5, duration: 1.5, delay: 1 });

// Ajouter un événement au bouton pour lancer l'animation
document.getElementById("play-animation").addEventListener("click", () => {
        timeline.restart();
});


                    
                

Le résultat final