Scroll Day/Night Sky Cycle — Free GSAP ScrollTrigger Sun & Moon Orbit

Most "day to night" scroll effects fake it: a sun that arcs up and down on one side, a separately-tuned moon animation bolted on afterward, colours that jump between fixed states instead of actually blending. This snippet builds the real thing — the sun and moon are two points on the exact same circular orbit, always exactly half a rotation (180°) apart, which is the actual geometric relationship between them in the sky. Scroll drives one continuous angle; everything else — position, sky colour, star visibility — is computed from that single number.

One angle, two bodies

place(el, angle) converts an angle into an (x, y) position on a circle using x = cx + r·sin(θ), y = cy − r·cos(θ), so θ = 0 sits at the top of the circle (midday) and the body sweeps clockwise as the angle grows. The moon is placed at sunAngle + Math.PI — literally the same formula, just offset by half a circle — so when the sun is highest in the sky, the moon is at the bottom of the orbit (hidden), and as the sun sets on one side, the moon is simultaneously rising on the other. That relationship falls out of the geometry for free; it isn't two separate timelines someone had to keep in sync by hand.

A circle that still reads as a horizon

A literal circular orbit would have the sun and moon visibly swinging *below* the ground, which breaks the illusion. The fix is simple: once a body's computed y position drops past a threshold near the bottom of the orbit, its opacity fades out over a few percent of scroll — so it disappears behind the hills silhouette exactly where a horizon would hide it, while the underlying motion stays a real, unbroken circle the whole time.

Colour as a lookup table, not a fixed set of states

The sky gradient comes from STOPS, an array of colour keyframes at specific points around the full cycle (midday, sunset, midnight, sunrise, and back to midday), each defined as top/bottom RGB pairs. skyColorAt(p) finds which two stops the current progress falls between and linearly interpolates every RGB channel, so the sky is always a real blend between two named states — never a hard cut and never an approximation.

Stars as a single opacity, not individually-animated dots

Sixty star elements are scattered once, with random position and per-star opacity baked in at creation time. Only the *container's* opacity animates — driven by Math.cos(p·2π)·-1 clamped to zero, which peaks at exactly p = 0.5 (midnight) and hits zero at p = 0 and p = 1 (midday) — so the whole starfield fades in and out as one cheap, GPU-composited property instead of animating sixty elements individually.

Customizing it

Change RX/RY for a taller or flatner orbit, add more STOPS for finer colour control (a golden-hour stop, a blue-hour stop), or swap the fixed +=3200 scroll distance for a value proportional to viewport height. Pair it with scroll color sections for more scroll-driven palette work, or scroll reveal grid for a GSAP ScrollTrigger stagger pattern.