Related Snippets

60 by shared tags
1 / 10
Scroll Neon Sign Flicker On

Scroll Neon Sign Flicker On

Scroll Typewriter

Scroll Typewriter

Three.js Scroll Shader Fluid Gradient Wave

Three.js Scroll Shader Fluid Gradient Wave

Scroll Canvas Generative Flow Field

Scroll Canvas Generative Flow Field

Scroll Canvas Particle Text Formation

Scroll Canvas Particle Text Formation

Scroll Stock Candlestick Crash

Scroll Stock Candlestick Crash

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Scroll Weather Scene Transition — Free HTML CSS JS Snippet

Scroll Weather Scene Transition · Scroll · Plain HTML, CSS & JS · Live preview

TagsGSAPScroll AnimationCSS AnimationJS Libraries

What's included

Features

Data-driven states array powers every property tween from one source of truth
GSAP interpolates CSS linear-gradient color stops for smooth sky color shifts
CSS @keyframes rain loop runs independently, only opacity is scrubbed by GSAP
Live onUpdate callback drives a text label from raw scroll progress
Four cohesive weather states: clear, cloudy, rain, sunset
Sticky single-stage scene avoids pinning boilerplate while feeling pinned
Fully reversible — every layer cross-fades back on scroll-up
Responsive sun sizing at the 640px breakpoint

About this UI Snippet

Scroll Weather Scene Transition — Multi-Property Scrub Timeline & CSS Keyframe Precipitation

Screenshot of the Scroll Weather Scene Transition snippet rendered live

This snippet drives a single sticky scene through four distinct weather states — clear, cloudy, rain, and sunset — by tweening several layered elements' colors, opacities and positions together on one GSAP scrub timeline keyed to scroll progress, while an independent CSS @keyframes loop handles the constant motion of falling rain drops.

A states array as the single source of truth

Rather than hand-writing four separate ScrollTrigger blocks, a states array defines each weather state's target values (sky gradient colors, sun opacity, cloud opacity/position, rain opacity, hill darkness, label text) at a given timeline progress p. A loop walks consecutive pairs of states and adds a .to() tween for each property between them at the correct timeline position — this keeps every layer's transition perfectly synchronized and makes adding a fifth weather state a one-line array edit.

Cross-fading the sky gradient

The sky background is a CSS linear-gradient; GSAP directly tweens the backgroundImage string between each state's two-color gradient. GSAP can interpolate gradient color stops when the gradient syntax structure matches between the from and to values, producing a smooth color-temperature shift that reads as time-of-day/weather lighting change.

Independent rain animation

The falling rain streaks are a separate, always-running CSS @keyframes rainfall animation using repeating-linear-gradient diagonal streaks translated vertically in a loop. GSAP only ever tweens the rain layer's opacity, letting the CSS keyframe loop continue underneath — so rain simply fades in and out rather than restarting, avoiding any visible animation "pop."

A live state label

A separate ScrollTrigger.create with an onUpdate callback reads self.progress on every scroll tick and finds the most recent state whose p threshold has been passed, updating a text label ("CLEAR" / "CLOUDY" / "RAIN" / "SUNSET") — demonstrating how to read raw scrub progress outside of a tween for driving non-animatable UI like text content.

Fully reversible

Every property lives on the same scrub: true timeline, so scrolling back up smoothly reverses the sky, sun, clouds and rain in the correct order back to the clear starting state.

This is a deliberately different technique from Scroll Parallax Layers — here layered elements cross-fade and recolor in place rather than moving at different depths.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Give this snippet's HTML, CSS and JS to an AI coding assistant and ask it to explain how the states array and the pairwise-loop of .to() tweens work together to keep four separate weather transitions synchronized on one timeline — and why that's more maintainable than writing four hand-rolled ScrollTrigger blocks. It's also a strong candidate to extend: ask the assistant to add a fog state using a semi-transparent white overlay layer, to add wind-driven cloud drift speed that varies per state, or to replace the CSS-drawn hills with an inline SVG skyline silhouette that also shifts color per weather state.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a scroll-driven weather scene transition in HTML, CSS and JavaScript using GSAP and ScrollTrigger — no canvas, no WebGL, no external images.

Requirements:
- Create one sticky-positioned scene containing a full-bleed sky background (CSS gradient), a sun element, a group of CSS-drawn cloud shapes, a rain layer using repeating-linear-gradient diagonal streaks with a continuous CSS @keyframes vertical translation loop, and a simple two-tone landscape silhouette at the bottom.
- Define a small ordered array of weather "states" (at least: clear, cloudy, rain, sunset), each specifying a target sky gradient, sun opacity, cloud opacity/position, rain opacity, and a landscape brightness filter, along with a progress value between 0 and 1 marking where in the overall scroll range that state should be fully reached.
- Wrap the scene in a tall multi-viewport-height section and, using one GSAP timeline attached via ScrollTrigger with scrub: true spanning the whole section, loop through consecutive pairs of states and add a tween for every layer's property from one state's values to the next, positioned on the timeline at that pair's progress range, so all layers transition together in sync.
- Keep the rain's falling motion as an independent always-running CSS keyframe animation; GSAP should only ever tween that layer's opacity in and out, never restart the keyframe loop.
- Add a live text label showing the current weather name, updated via a ScrollTrigger onUpdate callback that reads scroll progress directly rather than via a tween.
- The whole scene must transition forward and reverse cleanly and smoothly as the user scrolls down and back up.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

Requires
JS · gsap.min.jsJS · ScrollTrigger.min.js
<div class="hint">Scroll ↓ to change the weather</div>
<div class="weather-wrap">
  <div class="weather-stage">
    <div class="sky" id="sky"></div>
    <div class="sun" id="sun"></div>
    <div class="clouds" id="clouds">
      <div class="cloud c1"></div>
      <div class="cloud c2"></div>
      <div class="cloud c3"></div>
    </div>
    <div class="rain" id="rain"></div>
    <div class="hills">
      <div class="hill h1"></div>
      <div class="hill h2"></div>
    </div>
    <div class="label" id="weatherLabel">CLEAR</div>
  </div>
</div>

Step by step

How to Use

  1. 1
    Scroll through the previewScroll down slowly through the tall section to watch the scene shift from clear sky, through clouds and rain, into a sunset — all in one continuous sticky stage.
  2. 2
    Edit the states arrayIn the JS panel, edit the states array's sky colors, sunOp, cloudOp, rainOp and text values, or add a new object with its own p (progress 0–1) to insert another weather state.
  3. 3
    Adjust transition timingChange each state's p value to make a transition happen earlier/later or take a larger/smaller share of the scroll distance.
  4. 4
    Swap the rain effectEdit the repeating-linear-gradient angle and spacing in .rain::before/::after, or the rainfall keyframe duration, to change drop density and fall speed.
  5. 5
    Restyle the landscapeThe .hill elements are simple rounded divs — replace with an inline SVG skyline for a more detailed silhouette.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Weather app or forecast landing page hero
A literal animated weather scene for a forecast app, travel site, or climate-related product.
Mood-driven storytelling sections
Use shifting weather as an emotional beat in a narrative scroll page — repurpose states for a story's changing tone.
Seasonal or time-of-day themed campaign page
Adapt the states array to represent seasons or times of day instead of weather for a themed marketing page.
Portfolio hero with atmospheric depth
A calmer, ambient alternative hero animation that establishes mood before the visitor reaches content.
Learn multi-property scrub timelines
Study how one states array and a pairwise loop can drive many CSS properties across many layers in sync.
Learn GSAP gradient interpolation
See how GSAP tweens backgroundImage gradient strings directly, avoiding manual color-stop math.

Got questions?

Frequently Asked Questions

A states array defines target values for every layer at specific timeline progress points, and a loop adds a .to() tween per property per consecutive pair of states at the correct timeline position — one timeline drives everything together.

Yes — when the from and to gradient strings share the same structure (same function, same number of color stops), GSAP's CSSPlugin can interpolate each color channel between them, producing a smooth cross-fade.

The falling motion is a separate, continuously looping CSS @keyframes animation on the .rain pseudo-elements. GSAP only tweens the container's opacity, so the underlying animation loop is never interrupted or reset.

Add a new object to the states array with its own p between two existing values (e.g. 0.45) and its target sky/sun/cloud/rain/text values — the pairwise loop automatically inserts the new transition.

No — the stage uses position: sticky rather than ScrollTrigger's pin: true, which keeps the implementation simpler while achieving the same fixed-in-viewport visual effect for this use case.