Aggiornamento: Animazioni JavaScript con GSAP — Guida 2026

Aggiornamento: Animazioni JavaScript con GSAP — Guida 2026

Perché GSAP nel 2026: la libreria torna libera per tutti

Se hai seguito le animazioni JavaScript negli ultimi anni, sai che GSAP (GreenSock Animation Platform) ha sempre rappresentato lo standard industriale. Utilizzata da agenzie, freelance e team di prodotto in tutto il mondo, la libreria si distingue per performance, controllo e affidabilità. Nel 2024 GreenSock ha annunciato un cambiamento epocale: GSAP 3.13 è completamente gratuita, inclusi tutti i plugin Club che prima richiedevano abbonamento a pagamento — ScrollTrigger, Flip, MorphSVG, SplitText, DrawSVG e molti altri.

Questo rende il 2026 il momento perfetto per (ri)imparare GSAP da zero o aggiornare le proprie competenze. Se stai costruendo interfacce con React, Next.js o vanilla JS, integrare animazioni fluide e performanti è diventato un vantaggio competitivo reale, non solo un tocco estetico. Come ho già discusso nell’articolo sulle animazioni personalizzate con CSS e JavaScript puro, capire quando usare CSS e quando affidarsi a una libreria dedicata fa la differenza tra codice mantenibile e spaghetti di keyframe.

In questa guida aggiornata vedremo come installare GSAP 3.13, come usare le API principali, come sfruttare ScrollTrigger per animazioni al scroll, e come ottimizzare le performance. Tutti gli esempi sono testati e funzionanti, pronti per essere copiati nei tuoi progetti.

Installazione e setup di GSAP 3.13

Con GSAP ora gratuito al 100%, l’installazione è identica a qualsiasi altra dipendenza npm. Non servono più licenze, chiavi API o accessi speciali.

# Installazione via npm
npm install gsap

# Oppure via CDN (per progetti senza bundler)
# <script src="https://cdn.jsdelivr.net/npm/gsap@3.13/dist/gsap.min.js"></script>
# <script src="https://cdn.jsdelivr.net/npm/gsap@3.13/dist/ScrollTrigger.min.js"></script>

Se usi un bundler come Vite o Webpack, importa GSAP direttamente nel tuo modulo JavaScript. Per i plugin, la registrazione con gsap.registerPlugin() è obbligatoria prima di usarli:

// Importazione base in un progetto ES modules
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Flip } from "gsap/Flip";
import { SplitText } from "gsap/SplitText";

// Registrazione obbligatoria dei plugin
gsap.registerPlugin(ScrollTrigger, Flip, SplitText);

// Verifica versione
console.log(gsap.version); // "3.13.x"

Se lavori con React o Next.js, ricordati di registrare i plugin una sola volta, preferibilmente nel file di entry o in un custom hook. Con Next.js App Router, fai attenzione a usare GSAP solo in componenti client-side ("use client").

Le API fondamentali: gsap.to, gsap.from, gsap.fromTo

Il cuore di GSAP sono tre metodi che coprono il 90% dei casi d’uso quotidiani. La sintassi è rimasta stabile dalla versione 3.0, quindi se conosci già GSAP 3.x, sei a posto.

// gsap.to() — anima DA stato corrente A nuovi valori
gsap.to(".card", {
  x: 100,           // translateX in px
  y: -50,           // translateY in px
  opacity: 1,
  scale: 1.05,
  duration: 0.6,
  ease: "power2.out",
  stagger: 0.1,     // delay tra elementi multipli
});

// gsap.from() — anima DA valori iniziali a stato corrente
gsap.from(".hero-title", {
  y: 60,
  opacity: 0,
  duration: 0.8,
  ease: "back.out(1.4)",
});

// gsap.fromTo() — controllo completo su start e end
gsap.fromTo(
  ".progress-bar",
  { scaleX: 0, transformOrigin: "left center" },
  { scaleX: 1, duration: 1.2, ease: "power3.inOut" }
);

// Animazione di proprietà CSS personalizzate (custom properties)
gsap.to(document.documentElement, {
  "--accent-hue": 220,
  duration: 2,
  ease: "none",
});

Nota l’uso di stagger: con un solo parametro numerico, GSAP applica automaticamente un ritardo progressivo a ogni elemento del selettore. Puoi usare anche un oggetto stagger: { each: 0.1, from: "center" } per effetti più sofisticati. Questo è il tipo di animazione che ho approfondito nell’articolo su animazioni JavaScript avanzate con GSAP.

Timeline: orchestrare sequenze complesse

Le timeline GSAP sono lo strumento più potente per costruire sequenze animate sincronizzate. Permettono di concatenare animazioni, inserire pause, aggiungere label e controllare la riproduzione come fosse un video.

// Timeline per animazione di entrata di una hero section
const tl = gsap.timeline({
  defaults: { ease: "power3.out", duration: 0.7 },
  delay: 0.3,
});

tl
  .from(".nav", { y: -80, opacity: 0 })
  .from(".hero-eyebrow", { y: 30, opacity: 0 }, "-=0.4")   // overlap 0.4s
  .from(".hero-title span", {
    y: 50,
    opacity: 0,
    stagger: 0.08,
  }, "-=0.3")
  .from(".hero-subtitle", { y: 20, opacity: 0 }, "-=0.2")
  .from(".hero-cta", { scale: 0.8, opacity: 0 }, "-=0.1")
  .from(".hero-image", { x: 60, opacity: 0 }, "<");  // "<" = stesso momento step precedente

// Controllare la timeline
tl.pause();
tl.play();
tl.reverse();
tl.seek(1.5);    // vai a 1.5 secondi
tl.timeScale(2); // doppia velocità

// Aggiungere animazioni a label specifici
tl.add("imageIn", 1.2);
tl.to(".image", { opacity: 1 }, "imageIn");
tl.to(".caption", { y: 0 }, "imageIn+=0.2");

Un pattern molto usato nelle landing page moderne è la timeline che si attiva al caricamento della pagina per l’animazione di entrata, combinata con ScrollTrigger per le sezioni successive. Se stai costruendo una landing page per un Micro SaaS, questo approccio garantisce un’esperienza visiva professionale senza overhead eccessivo.

ScrollTrigger: animazioni al scroll nel 2026

ScrollTrigger era il plugin a pagamento più richiesto, ed ora è libero. Permette di triggerare, controllare e pin-nare animazioni in base alla posizione di scroll. Nel 2026, con i browser che supportano nativamente animation-timeline e scroll-driven animations, la domanda è: ha ancora senso usare ScrollTrigger?

La risposta è sì, per tre motivi: supporto browser universale (inclusi Safari), integrazione nativa con le timeline GSAP, e funzionalità avanzate come pin, scrub, e snap che le CSS scroll animations non replicano ancora completamente.

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// 1. Animazione semplice triggerata dallo scroll
gsap.from(".feature-card", {
  y: 60,
  opacity: 0,
  stagger: 0.15,
  duration: 0.8,
  ease: "power2.out",
  scrollTrigger: {
    trigger: ".features-section",
    start: "top 80%",    // quando il top del trigger raggiunge 80% del viewport
    end: "bottom 20%",
    toggleActions: "play none none reverse",
  },
});

// 2. Animazione scrub — sincronizzata con lo scroll (non temporale)
gsap.to(".parallax-bg", {
  yPercent: -30,
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax-section",
    start: "top bottom",
    end: "bottom top",
    scrub: true,  // o un numero per smoothing (es. scrub: 1.5)
  },
});

// 3. Pin section — fissa l'elemento durante lo scroll
const pinTl = gsap.timeline({
  scrollTrigger: {
    trigger: ".sticky-section",
    pin: true,
    start: "top top",
    end: "+=2000",   // 2000px di scroll prima di sbloccare
    scrub: 1,
  },
});
pinTl
  .from(".step-1", { opacity: 0, x: -100 })
  .from(".step-2", { opacity: 0, x: 100 })
  .from(".step-3", { opacity: 0, y: 50 });

// 4. Cleanup (fondamentale per React e SPA)
// In React, usarlo dentro useLayoutEffect con return cleanup
useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    // animazioni qui
  }, containerRef);
  return () => ctx.revert(); // cleanup automatico
}, []);

Il parametro scrub è uno dei più potenti: con scrub: true l’animazione si sincronizza perfettamente con lo scroll in tempo reale. Con scrub: 1.5 aggiungi uno smoothing di 1.5 secondi, che ammorbidisce i movimenti bruschi. Questo pattern lo trovi anche nell’articolo su scrolling orizzontale con GSAP e ScrollTrigger.

SplitText e animazioni tipografiche avanzate

SplitText era uno dei plugin Club più desiderati, ora disponibile a tutti. Divide automaticamente il testo in caratteri, parole o righe, rendendoli singolarmente animabili.

import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);

// Animazione di entrata lettera per lettera
const split = new SplitText(".headline", { type: "chars,words" });

gsap.from(split.chars, {
  opacity: 0,
  y: 40,
  rotateX: -90,
  stagger: 0.02,
  duration: 0.6,
  ease: "back.out(1.7)",
  transformOrigin: "0% 50% -50",
  scrollTrigger: {
    trigger: ".headline",
    start: "top 85%",
  },
});

// Reveal riga per riga con clip-path (tecnica maskReveal)
const splitLines = new SplitText(".body-text", { type: "lines" });

// Wrappa ogni riga in un div con overflow hidden
splitLines.lines.forEach((line) => {
  const wrapper = document.createElement("div");
  wrapper.style.overflow = "hidden";
  line.parentNode.insertBefore(wrapper, line);
  wrapper.appendChild(line);
});

gsap.from(splitLines.lines, {
  y: "110%",
  duration: 0.7,
  stagger: 0.06,
  ease: "power3.out",
  scrollTrigger: {
    trigger: ".body-text",
    start: "top 80%",
  },
});

// Cleanup SplitText (importante per resize e responsive)
window.addEventListener("resize", () => {
  split.revert();   // riporta al testo originale
  // poi reinizializza se necessario
});

Un warning importante: SplitText e i font custom vanno usati insieme a document.fonts.ready, altrimenti il testo viene diviso prima che il font sia caricato, generando wrapping errato. Usa sempre await document.fonts.ready prima di inizializzare SplitText in produzione.

Performance: GSAP vs CSS animations nel 2026

Una domanda che ricevo spesso: quando usare GSAP e quando le CSS animations native? La risposta pratica nel 2026:

• CSS puro per microinterazioni semplici (hover, focus, transizioni di stato) — zero JS, zero bundle size
• GSAP per sequenze complesse, animazioni controllate via JS, ScrollTrigger, SplitText, o quando hai bisogno di controllare la timeline programmaticamente
• CSS Scroll Animations native (animation-timeline: scroll()) per effetti parallax semplici — ma con cautela su Safari

GSAP anima sempre su transform e opacity dove possibile, sfruttando l’accelerazione GPU. Evita di animare proprietà che triggerano reflow come width, height, top, left. Per le animazioni legate alla performance web puoi approfondire nel mio articolo su ottimizzare INP e FID per capire l’impatto delle animazioni sui Core Web Vitals.

Un tip concreto: usa gsap.ticker.lagSmoothing(false) per disabilitare il lag smoothing in animazioni precise, e gsap.ticker.fps(120) per abilitare il supporto a schermi a 120Hz.

🔧 Pro tip: Usa will-change: transform con parsimonia — GSAP lo gestisce automaticamente durante le animazioni attive. Impostarlo manualmente su troppi elementi degrada le performance invece di migliorarle.

GSAP con React e Next.js: pattern 2026

Integrare GSAP in React richiede attenzione al lifecycle dei componenti. Il pattern ufficiale consigliato da GreenSock usa gsap.context() che gestisce automaticamente il cleanup delle animazioni quando il componente viene smontato.

// Pattern consigliato per React 18+ con gsap.context()
import { useLayoutEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

export function AnimatedSection({ children }) {
  const containerRef = useRef(null);

  useLayoutEffect(() => {
    // gsap.context() scopa automaticamente i selettori al container
    const ctx = gsap.context(() => {
      // Le animazioni qui usano selettori relativi al containerRef
      gsap.from(".animated-item", {
        y: 50,
        opacity: 0,
        stagger: 0.1,
        duration: 0.7,
        ease: "power2.out",
        scrollTrigger: {
          trigger: containerRef.current,
          start: "top 80%",
        },
      });
    }, containerRef); // scope al ref

    return () => ctx.revert(); // cleanup al unmount
  }, []);

  return (
    <section ref={containerRef}>
      {children}
    </section>
  );
}

// Hook personalizzato riutilizzabile
function useGsapAnimation(animationFn, deps = []) {
  const ref = useRef(null);

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      animationFn(ref.current);
    }, ref);
    return () => ctx.revert();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);

  return ref;
}

Per Next.js 14+ con App Router, tutti i componenti che usano GSAP devono avere "use client" in cima al file. Se usi useLayoutEffect lato server otterrai un warning — puoi sostituirlo con useIsomorphicLayoutEffect (disponibile in usehooks-ts) o usare semplicemente useEffect con un check di typeof window !== "undefined".

FAQ e Domande Frequenti

GSAP 3.13 è davvero gratuito per uso commerciale?

Sì, GSAP 3.13 e tutti i plugin (inclusi ScrollTrigger, Flip, SplitText, MorphSVG, DrawSVG, MotionPathHelper) sono completamente gratuiti per uso commerciale. Il modello Club GreenSock è stato abbandonato. L’unica eccezione riguarda alcuni plugin specifici come GSDevTools che rimangono a uso personale/educativo. Controlla sempre la licenza aggiornata su greensock.com per casi d’uso particolari, ma per il 99% dei progetti web commerciali non ci sono restrizioni.

Devo migrare da GSAP 3.x a 3.13?

La migrazione da qualsiasi versione 3.x a 3.13 è non-breaking: basta aggiornare il pacchetto npm. Tutte le API sono retrocompatibili. Il cambiamento principale è l’accesso ai plugin Club che prima richiedevano importazioni speciali dal CDN di GreenSock — ora puoi importarli direttamente da gsap/ScrollTrigger, gsap/SplitText ecc. Se migravi da GSAP 2.x a 3.x, l’API di base era cambiata (da TweenMax a gsap), ma da qualsiasi 3.x non ci sono breaking changes.

GSAP vs Motion (Framer Motion) nel 2026: quale scegliere?

Dipende dal contesto. Motion (ex Framer Motion) è ottima per progetti React-centric con animazioni di layout e transizioni di componenti dichiarative. GSAP vince in scenari di animazione complessa, scroll storytelling, animazioni SVG avanzate, e quando hai bisogno di controllo imperativo preciso. In molti progetti si usano entrambe: Motion per le transizioni UI, GSAP per le sezioni animate “hero” e scroll experiences. Se stai sviluppando con JavaScript puro (no framework), GSAP non ha rivali.

Come evitare il flash of unanimated content (FOAC)?

Il FOAC avviene quando gli elementi sono visibili per un frame prima che GSAP li animi. La soluzione classica è impostare lo stato iniziale via CSS: .animated-item { opacity: 0; } e poi lasciare che GSAP imposti opacity: 1 come valore finale. In alternativa, usa gsap.set() (equivalente a un tween a durata zero) prima di iniziare l’animazione per impostare immediatamente i valori di partenza. Con ScrollTrigger, il FOAC è particolarmente comune — usa sempre la proprietà immediateRender: false se noti problemi.

Conclusione

GSAP 3.13 gratuito cambia le carte in tavola per chiunque lavori con animazioni web. Non c’è più motivo di rinunciare a ScrollTrigger, SplitText o Flip per questioni di budget: sono tutti disponibili senza costi. Nel 2026, con progetti sempre più orientati all’esperienza utente e alle performance percepite, saper orchestrare animazioni complesse e ottimizzate è una competenza che differenzia davvero.

Inizia con le API base, aggiungi ScrollTrigger per le animazioni al scroll, e poi esplora SplitText per la tipografia animata. Il codice in questa guida è tutto production-ready: copialo, adattalo al tuo progetto, e misura l’impatto sulla UX. Se sei interessato a come l’AI può supportare il tuo workflow di sviluppo frontend, dai un’occhiata anche agli strumenti AI per developer nel 2026.

Suggerimenti e Risorse

🔧 Risorsa tecnica: La documentazione ufficiale GSAP (greensock.com/docs) è la più completa del settore, con esempi interattivi per ogni metodo e plugin. Il Codepen di GreenSock raccoglie migliaia di demo categorizzate.

💡 Pro tip: Usa il GSAP Ease Visualizer (greensock.com/ease-visualizer/) per scegliere visivamente la curva di easing giusta. Nel 2026, power2.out per entrate, power2.in per uscite, e back.out per effetti rimbalzo sono le scelte più efficaci per UI moderne.

🎯 Pattern avanzato: Combina GSAP con la View Transitions API nativa del browser per animazioni di navigazione tra pagine. Leggi la guida su View Transitions API in JavaScript per capire come integrare i due approcci senza conflitti.