01 / 05

2019

Freelance, for clients in Argentina and the US.

Scroll to play

Motion / 3D Lablab.iamnaw.dev/ribbon05 · Career ribbon

-- fps·-- ms

TECH SHEET · 05 / 06

Career ribbon

Scroll storytelling of my own timeline. A ribbon draws itself through space and the camera rides along it.

Three.js
GSAP

TECHNIQUE

Catmull-Rom curve, one tube geometry
Scroll sets the draw range, so it is drawn, not animated
Camera follows a point just behind the tip

PERFORMANCE · MEASURED LIVE

Draw calls: —
Triangles: —
Frame rate: —
Pixel ratio cap: 1.5
JS per frame: —

FALLBACK

Reduced motion: the ribbon jumps to each chapter, no camera easing. Without WebGL: a still image of the full ribbon.

FROM THE SOURCE

geo.setDrawRange(0, Math.floor(total * p / 60) * 60);
const tip = curve.getPointAt(p);
const back = curve.getPointAt(p - 0.1);
camera.position.lerp(back.add(offset), 0.12);
camera.lookAt(tip);