GSAP on nyt ilmainen kaikille – ja muut kirjastot sivuston animaatioihin

GSAP on yksi käytetyimmistä JavaScript-animaatiokirjastoista ja se on ollut huhtikuun 2025 lopusta lähtien täysin ilmainen myös kaupalliseen käyttöön. Muutos tuli Webflow'n ansiosta: Webflow osti GSAP:n syksyllä 2024 ja versiossa 3.13 kaikki aiemmin maksulliset lisäosat, kuten SplitText ja MorphSVG, avattiin kaikille. Käytän GSAP:ia esimerkiksi Fyran sivustolla. Tässä artikkelissa näytän, mitä sillä voi tehdä. Esittelen myös muita kirjastoja, joilla sivustoon saa liikettä tai kolmiulotteisuutta.

Mitä GSAP:n maksuttomuus tarkoittaa käytännössä?

Ennen moni hienoimmista ominaisuuksista oli maksullisen Club GSAP -jäsenyyden takana. Nyt kaikki on samassa gsap-paketissa, eikä erillistä lisenssiä tarvita asiakasprojekteihin. Esimerkiksi tekstin pilkkominen sanoiksi tai kirjaimiksi animaatiota varten (SplitText) ja SVG-muotojen muuntaminen toisiksi (MorphSVG) ovat nyt ilmaisia. GSAP:n mukaan SplitText kirjoitettiin samalla uusiksi ja se huomioi nyt myös ruudunlukijat.

Pieni esimerkki: kortit liukuvat esiin vieritettäessä

ScrollTrigger-lisäosalla animaatio käynnistyy, kun elementti tulee näkyviin:

gsap.registerPlugin(ScrollTrigger);

gsap.from(".kortti", {
  y: 40,
  opacity: 0,
  stagger: 0.15, // kortit tulevat yksi kerrallaan
  scrollTrigger: { trigger: ".kortit", start: "top 80%" },
});

Ja otsikko, jonka sanat nousevat paikoilleen:

const split = SplitText.create("h1", { type: "words" });
gsap.from(split.words, { y: 20, opacity: 0, stagger: 0.05 });

Kokeile: teksti, joka animoituu vieritettäessä

Alla oleva teksti on sidottu sivun vieritykseen ScrollTriggerin scrub-asetuksella. Kirjaimet animoituvat esiin sitä mukaa kuin vierität ja punainen alleviivaus ja alareunan palkki seuraavat perässä. Vieritä takaisin ylös, niin animaatio kelautuu taaksepäin.

GSAP + ScrollTrigger + SplitText

Hyvä animaatio ohjaa katsetta, näyttää järjestyksen ja pysähtyy, kun asia on sanottu.Hyvä animaatio ohjaa katsetta, näyttää järjestyksen ja pysähtyy, kun asia on sanottu.

Koodia tarvitaan vähän. Animaatio ajetaan vain, jos käyttäjä ei ole pyytänyt vähennettyä liikettä:

gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
  const split = SplitText.create(".teksti", { type: "words, chars" });

  gsap.timeline({
    scrollTrigger: { trigger: ".demo", start: "top 75%", end: "bottom 35%", scrub: 0.6 },
  })
    .from(split.chars, { opacity: 0.15, yPercent: 30, stagger: 0.02 })
    .from(".korostus", { backgroundSize: "0% 0.12em" });

  return () => split.revert(); // palauttaa alkuperäisen tekstin
});

Muut kirjastot ja mihin ne sopivat

Motion on Framer Motionin seuraaja. Se toimii Reactin lisäksi tavallisella JavaScriptillä ja on avointa lähdekoodia (MIT-lisenssi). Se sopii hyvin käyttöliittymän pieniin liikkeisiin, kuten painikkeen palautteeseen:

import { animate } from "motion";
animate(".nappi", { scale: [1, 1.06, 1] }, { duration: 0.4 });

anime.js on kevyt yleiskirjasto, jonka versio 4 toi muun muassa jousifysiikan. Se on hyvä valinta, kun GSAP tuntuu liian raskaalta pieneen tarpeeseen.

three.js on tunnetuin kirjasto 3D-grafiikkaan selaimessa. Pyörivä kuutio vaatii vain muutaman rivin:

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 100);
camera.position.z = 3;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.append(renderer.domElement);

const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial());
scene.add(cube);
renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.015;
  renderer.render(scene, camera);
});

Oikeassa projektissa kuution tilalla on esimerkiksi tuotteen 3D-malli tai vaikkapa asunnon pohjakuva, jota kävijä voi pyörittää. Alla on sellainen: seinät ja lattiat ovat three.js:n peruslaatikoita, kamera liikkuu OrbitControlsilla ja klikattu huone tunnistetaan Raycasterilla, joka laskee, mihin 3D-objektiin osoitin osuu.

tween.js on pieni kirjasto arvojen pehmeään muuttamiseen. Sitä käytetään usein three.js:n kanssa, esimerkiksi kameran liu'uttamiseen kohteesta toiseen.

Lottie toistaa After Effectsillä tehtyjä animaatioita kevyinä JSON-tiedostoina. Se sopii ikoneihin ja kuvituksiin, jotka suunnittelija tekee valmiiksi.

Rive on Lottien kaltainen, mutta sen animaatiot voivat reagoida käyttäjään tilakoneiden avulla. Se sopii esimerkiksi interaktiivisiin hahmoihin ja painikkeisiin.

Lenis pehmentää sivun vierityksen. Se on suosittu näyttävillä markkinointisivuilla, mutta sitä kannattaa käyttää harkiten, koska se muuttaa selaimen omaa vierityskäytöstä.

Joskus kirjastoa ei tarvita ollenkaan

Selaimet osaavat yhä enemmän itse. CSS:n vieritykseen sidotuilla animaatioilla tehdään esimerkiksi lukemisen edistymispalkki ilman JavaScriptiä:

.lukupalkki {
  position: fixed; top: 0; left: 0; width: 100%; height: 4px;
  background: #d43a2e; transform-origin: 0 50%;
  animation: kasva linear;
  animation-timeline: scroll();
}
@keyframes kasva { from { transform: scaleX(0); } to { transform: scaleX(1); } }

Tuki ei ole vielä kaikissa selaimissa, erityisesti Firefoxissa, joten tarkista tilanne MDN:stä ja tee niin, että sivu toimii ilmankin. Toinen hyödyllinen selaimen oma ominaisuus on View Transitions API, jolla sivujen tai näkymien vaihtumiseen saa pehmeän siirtymän.

Muista saavutettavuus

Liike voi aiheuttaa joillekin pahoinvointia tai vaikeuttaa keskittymistä. Siksi:

• Kunnioita käyttäjän asetusta. Kun käyttöjärjestelmässä on valittu vähennetty liike, animaatiot pitää jättää pois tai tehdä hyvin hillityiksi. GSAP:ssa tähän sopii gsap.matchMedia(), CSS:ssä @media (prefers-reduced-motion: reduce).
• Anna mahdollisuus pysäyttää. Jos liike jatkuu yli viiden sekunnin ajan, sen pitää voida pysäyttää.
• Älä piilota sisältöä animaation taakse. Jos animaatio ei käynnisty, sisällön pitää silti näkyä.

Tarkistan nämä asiat saavutettavuusauditissa yhdessä muiden WCAG-vaatimusten kanssa.

Mikä kirjasto kannattaa valita?

• GSAP, kun animaatioita on paljon, ne on sidottu vieritykseen tai ajoitus on tärkeää.
• Motion tai anime.js käyttöliittymän pieniin liikkeisiin.
• three.js 3D:hen ja WebGL-efekteihin.
• Lottie tai Rive, kun suunnittelija tekee animaation valmiiksi.
• Pelkkä CSS, kun se riittää. Se on aina kevyin vaihtoehto.

Animaatiot kuuluvat räätälöityihin WordPress-toteutuksiini, mutta ne toimivat millä tahansa alustalla, myös Webflow'ssa.

Usein kysyttyä

Onko GSAP ilmainen myös asiakasprojekteissa?

Kyllä. GSAP:n mukaan koko kirjasto lisäosineen on ilmainen, myös kaupallisessa käytössä. Tarkista ajantasaiset lisenssiehdot GSAP:n sivuilta ennen käyttöä.

Hidastavatko animaatiot sivustoa?

Huonosti tehtynä kyllä. Animoi ensisijaisesti ominaisuuksia transform ja opacity, joita selain pystyy käsittelemään kevyesti. Lataa raskaat kirjastot, kuten three.js, vain sivuille, joilla niitä tarvitaan.

Toimiiko GSAP WordPressissä?

Toimii. Sen voi ladata teeman skripteihin tai lisätä animaatiot omiin lohkoihin, jolloin sisällön päivittäjä voi käyttää niitä ilman koodia.