Maxmilkin Orbit Text Preloader
What it does
Portfolio preloader where eight words ride concentric SVG circular orbits, stretching and sliding around their rings via animated textPath textLength/startOffset while the whole SVG wobbles in random ±25° rotations and a central counter tweens 0 to 100. After ~6s the orbit words fade out ring by ring, the loader dissolves away and the hero reveals with a 1.25→1 background zoom-out and word-masked SplitText copy sliding up on a custom ease. Plays automatically on page load.
How it's built
| Category | preloader |
|---|---|
| Tech | gsap |
| GSAP plugins | SplitText, CustomEase |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Orbit-Text SVG Preloader → Hero Reveal
## Goal
Build a full-screen portfolio **preloader** whose star effect is eight words riding eight **concentric circular SVG orbits**. Each word is an SVG `<textPath>` that, as it animates, **stretches** (its `textLength` grows enormously) and **slides** around its ring (its `startOffset` shifts), so the words appear to elongate and smear along nested circles while the whole SVG **wobbles** back and forth in random ±25° rotations and a central counter tweens **0 → 100**. After ~6 s the orbit words **fade out ring by ring**, the loader panel dissolves, and the hero underneath is revealed with a background **1.25 → 1 zoom-out** and a word-masked **SplitText** line sliding up on a custom ease. Everything plays automatically once on page load; there is no scroll.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugins **`SplitText`** and **`CustomEase`**. No smooth-scroll library — the whole thing is a pure load-triggered set of tweens, the page does not scroll. Register: `gsap.registerPlugin(SplitText, CustomEase)`. The animations are created immediately on module execution (no `DOMContentLoaded`/`fonts.ready` wrapper is required, though wrapping in `fonts.ready` is fine).
## Layout / HTML
Two stacked layers. The `.loader` is a **fixed** full-viewport overlay (`z-index: 2`) that sits on top of a `.hero` section (natural flow underneath). Class/tag names are load-bearing — the JS queries them.
```
<div class="loader">
<svg viewBox="-425 -425 1850 1850" xmlns="http://www.w3.org/2000/svg">
<!-- 8 concentric orbit paths (see geometry below) -->
<path id="loader-orbit-1" d="..." />
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.