documentación viva · 5 librerías

La doc que se demuestra sola

Cada concepto de GSAP, Lenis, SplitType, Swiper y Motion tiene su demo real aquí mismo: esta página está construida con las cinco. Si lo lees, es porque funciona.

scroll — la página lo cuenta

// 01 · scroll suave

Lenis

El scroll con inercia que estás usando ahora mismo para leer esto.

MIT · darkroom.engineering ~5 kB gzip envuelve el scroll nativo

Lenis no secuestra el scroll: envuelve el nativo y lo suaviza, así que position: sticky, las anclas y la accesibilidad siguen funcionando. Esta página entera scrollea a través de Lenis — prueba la inercia con la rueda.

js · integración con GSAP

const lenis = new Lenis({ duration: 1.15 });
lenis.on('scroll', ScrollTrigger.update);

// UN solo bucle rAF: el ticker de GSAP alimenta a Lenis
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

css · obligatorio

<link rel="stylesheet" href="lenis.css"> <!-- 513 bytes: estados .lenis-* -->

// 02 · motor de animación

GSAP + ScrollTrigger

Tween, timeline, eases, stagger — y el scroll como mandatorio.

MIT / gratis completo desde 2024 ~23 kB core ScrollTrigger: scrub · pin · batch

2.1 · Tween y eases. El bloque fundamental: una animación de A a B con ease (curva de aceleración) y delay. Prueba el botón:

demo · gsap.to

box

gsap.to("#box-tween", {
  x: 260, rotation: 270, duration: 1.4,
  ease: "elastic.out(1, 0.4)",   // la curva que anima el box
  yoyo: true, repeat: 1
});

2.2 · Stagger. La misma animación repartida en serie entre elementos. El stagger desplaza el inicio de cada una — la cascada de las cifras del clan usa esto:

demo · stagger + contador

0efectivos

0páginas

0librerías

gsap.from(".stat", {
  opacity: 0, y: 24, stagger: 0.085, duration: 0.6,
  ease: "power2.out",
  scrollTrigger: { trigger: ".counters", start: "top 85%", once: true }
});
// el contador: quickTo o tween de un objeto {val: 0} con onUpdate

2.3 · Pin + scrub. La sección queda clavada mientras el scroll avanza y la animación se "scrubbea" (ligada directamente a la barra, como un reproductor de vídeo). Está sección de abajo se clava y muestra la barra de progreso del pin:

demo · pin: true, scrub: 0.6

scroll progress: 0%

gsap.to("#pin-fill", {
  scaleX: 1, ease: "none",
  scrollTrigger: {
    trigger: ".pin-stage", start: "top top", end: "bottom bottom",
    pin: true, scrub: 0.6, anticipatePin: 1
  }
});
// onUpdate: self => #pin-pct.textContent = Math.round(self.progress*100)+"%"

// 03 · texto animable

SplitType

Convierte texto en líneas, palabras y caracteres animables.

MIT · 4 kB sustituto libre de SplitText

El titular de esta página se partió en chars con SplitType y entra letra a letra. Regla de oro: para conservar los saltos de línea naturales, divide en words + lines (solo chars rompe el wrapping — lo medimos en producción).

demo · escribe y mira

const split = new SplitType("#split-out", { types: "words, chars" });
gsap.from(split.chars, {
  opacity: 0, yPercent: 80, rotateX: -40,
  stagger: 0.03, duration: 0.6, ease: "power3.out"
});

// 04 · carrusel

Swiper

El slider estándar: este de abajo ES un Swiper real con fade.

MIT · core módulos: fade · coverflow · parallax · a11y

demo · effect: fade

GSAP — el motor

Lenis — el scroll

SplitType — el texto

Swiper — el carrusel

new Swiper(".swiper", {
  effect: "fade", fadeEffect: { crossFade: true },
  loop: true, speed: 600,
  autoplay: { delay: 2600, disableOnInteraction: false },
  pagination: { el: ".swiper-pagination", clickable: true }
});

// 05 · spring físico

Motion

Animaciones con física de muelle (spring) sobre WAAPI nativo.

MIT WAAPI = corre en el compositor ideal micro-interacciones

Cuando la animación debe sentirse física (rebote, inercia), los springs de Motion terminan donde la física manda, no donde acaba un tween. Pulsa la bola:

demo · spring

js · Motion one (vanilla)

// Física de muelle (Hooke): F = -kx - c·v — el mismo modelo que usa
// Motion internamente para sus springs (la demo lo integra a mano con rAF).
// Con la lib Motion (npm) sería:
import { animate } from "motion";
animate(dot, { x: 180 }, { type: "spring", stiffness: 120, damping: 9 });

// 06 · 3D en la web

Three.js

El motor 3D estándar: la escena de abajo ES un renderizado WebGL en directo.

MIT · ~100k ★ módulos: scene · camera · material · fog

demo · canvas WebGL (gira con el scroll)

const escena = new THREE.Scene(); // fog para la caída al negro
escena.fog = new THREE.Fog(0x0b0b0f, 6, 18);
const malla = new THREE.Mesh(geo,
  new THREE.MeshNormalMaterial());  // color según orientación, sin luces

doc completa cacheada →

// 07 · física real

Matter.js

Física 2D con colisiones y gravedad: las cajas de abajo caen de verdad. Click para relanzarlas.

MIT · ~80 kB engine · bodies · composite · runner · render

demo · gravedad + rebote (click = relanzar)

const eng = Matter.Engine.create({ gravity: { y: 1 } });
Matter.Composite.add(eng.world, caja);
Matter.Runner.run(runner, eng); // bucle propio de la lib

doc completa cacheada →

// 08 · anotación a mano

Rough Notation

Subrayados y círculos "a mano alzada" animados sobre cualquier texto. 4 kB.

MIT · 4 kB tipos: underline · circle · box · strike-through

demo · animar anotaciones

Destaca esta palabra clave en dorado.

Rodea este término en verde.

const a = RoughNotation.annotate(el, {
  type: "underline", color: "#e5c988",
  strokeWidth: 3, animationDuration: 900
}); a.show(); // el SVG se pinta en el elemento padre

doc completa cacheada →