Drawing light trails with GSAP

The line that follows you down this site is a single SVG path. It enters from the right edge, drops onto a side rail and switches rails in the gaps between sections, like a light cycle making 90° turns.

Measured, not drawn by hand

The path isn’t hard-coded. On load, and whenever the layout changes, the script measures each section and builds a list of orthogonal waypoints. Every corner is then rounded with a quarter arc. Because each piece is either a straight line or a quarter circle, the length at any point can be computed exactly. That lets the dots on the rail know when the light has reached them.

Scroll to length

A naive mapping (scroll progress × total length) drifts: the horizontal runs between rails add length without adding height, so the head would end up off screen. Instead, the script builds keyframes from vertical position to path length:

• Vertical runs follow the viewport one-to-one.
• Each rail switch is spread over a fixed window of scroll, so the turn plays out smoothly instead of snapping.

The drawn length then eases toward that target every frame on GSAP’s ticker, and that easing is what makes the line flow.

Replace this post with your own writing. Posts live in src/content/blog/ as Markdown files.