Animated Geometric GSAP Preloader

This is an Animated Geometric GSAP Preloader. It utilizes precise JavaScript timeline sequencing to manipulate three basic DOM elements into a shifting, continuous puzzle. Its function is to hold user attention during prolonged data fetching. The effect is heavily mechanical, converting simple CSS shapes into an illusion of complex, articulating parts.

Specs

• Weight: ~75 KB (predominantly the GSAP library).
• Performance: Triggers layout recalculations due to width and margin manipulation. Best used on empty loading screens to avoid jank.
• DOM Complexity: Ultra-low (4 HTML nodes).
• Theming: Controlled via two SCSS variables ($background, $theme-black).

Anatomy

The architecture relies on an extremely minimal DOM paired with a monolithic JavaScript sequence.

• HTML (The Skeleton): A .loader-wrapper containing three identical sibling .loader nodes. No SVG or complex canvas paths are used.
• SCSS (The Skin): Defines the physical boundaries. It uses SCSS placeholders (%loader) to apply thick borders (10px solid) and rounded caps (border-radius: 40px) to the empty div elements, effectively turning them into solid geometric lines.
• JS (The Nervous System): A single, chained GSAP timeline. It overrides CSS by aggressively injecting inline styles frame-by-frame, dictating rotations, widths, and positioning.

Logic

The core mechanism — the “Glyph-logic” — is the dynamic manipulation of the transformOrigin.

.set(".loader-2", { transformOrigin: "72px 17px", rotate: 270 })
.to(".loader-2", duration, { width: 35 })
.to(".loader-1", duration, { width: 90 })
.set(".loader-1", { transformOrigin: "45px 17.5px", rotate: 180 })

Instead of interpolating the transformOrigin, GSAP uses .set() to instantly snap the pivot point to a new coordinate before executing the next rotation or scaling action. This creates the illusion of a segmented robotic arm continuously locking into new joints.

Feel

The interaction is strictly visual. It feels precise, unyielding, and highly mechanical. The timing is uniform, lacking easing (ease: "none" implied by default structural shifts), which reinforces the robotic, clockwork aesthetic.