The send button
Buttons, Transitions, SVG
NewFree
All components
The week's weather
A week of weather in the mountains: choosing a day, the sky of the big icon rearranges itself (the sun slides behind the clouds, the clouds darken, the rain or the snow starts, the lightning flashes), the temperature rolls up when the day is warmer and down when it is colder, the card takes the colours of the sky and the curve of the temperatures moves like a wave.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The week's weather</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/quicksand@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the week's weather: choosing a day, the sky of the big icon rearranges itself (the sun slides behind the
clouds, the rain starts), the temperature rolls up or down, the card takes the colour of the sky and the
curve of the day's temperatures moves into its new shape -->
<section class="weather" aria-labelledby="weather-place" data-weather data-autoclic>
<header class="weather__head">
<h2 class="weather__place" id="weather-place" data-place></h2>
<p class="weather__when"><span class="roll" data-day></span></p>
</header>
<div class="now">
<div class="now__icon" data-icon></div>
<div class="now__main">
<p class="now__temp"><span class="roll" data-temp></span><span class="now__deg">°</span></p>
<p class="now__sky"><span class="roll" data-sky></span></p>
</div>
<dl class="now__stats">
<div><dt data-wet-name>Rain</dt><dd data-wet></dd></div>
<div><dt>Wind</dt><dd data-wind></dd></div>
</dl>
</div>
<div class="chart" tabindex="0" role="slider" aria-label="Temperature through the day" data-chart>
<svg class="chart__svg" aria-hidden="true" data-chart-svg>
<defs>
<linearGradient id="chart-area" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" style="stop-color: var(--line); stop-opacity: 0.34"/>
<stop offset="1" style="stop-color: var(--line); stop-opacity: 0"/>
</linearGradient>
</defs>
<path class="chart__area" fill="url(#chart-area)" data-area/>
<line class="chart__guide" data-guide/>
<path class="chart__line" data-line/>
</svg>
<span class="chart__tip" aria-hidden="true" data-tip></span>
<div class="chart__hours" aria-hidden="true" data-hours></div>
</div>
<div class="days" role="radiogroup" aria-label="Day" data-days>
<span class="days__pill" aria-hidden="true" data-pill></span>
</div>
<p class="sr" aria-live="polite" data-live></p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
118 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The week's weather” from Animorio and fit it into my siteWhat it does
On a white background a sky-coloured card: Madonna di Campiglio and the day, a big icon, the day's highest temperature with the sky under it (Sunny), the chance of rain and the wind, the curve of the temperatures from 6 am to 8 pm and at the bottom the seven days, each with its small icon, its highest and its lowest. Choosing another day the pieces of the big icon move: the sun shrinks and disappears behind the clouds or comes out of them with a bounce, the clouds come in from the side and darken, the drops or the flakes start falling, in a storm the lightning flashes twice and then waits; the sun's rays turn slowly. The temperature rolls upwards when the day is warmer and downwards when it is colder, the names of the day and of the sky roll, rain and wind count to the new figures, the card changes colour and the curve takes its new shape one point after another, like a wave from the morning to the evening. Going over the curve with the pointer or a finger shows the hour with its temperature (2 pm · 13°). The white pill slides under the day chosen with a bounce and its icon gives a little hop.
How it works
A sky made of pieces
Every icon, big or small, is the same SVG: a sun with its rays, a cloud behind, a cloud in front with its shadow, a bolt, the rain and the snow. Each piece sits in a group put in its place once and moves inside it: for each sky a table says where every piece stands (x, y, scale, opacity) and what colour the clouds are, and GSAP takes them there in CHANGE seconds.
Rain, snow and lightning
In the big icon each drop falls in a loop of its own, started at a random point (progress with Math.random()), so they never fall all together; the flakes come down more slowly, swaying and turning. The lightning is a repeating timeline: two quick flashes and a pause.
The rolling figures
The day, the sky and the temperature are words that roll: the old one leaves the way of the change, the text changes and the new one comes in from the other side with back.out. The temperature rises when the day is warmer and falls when it is colder; rain and wind count with a tween on a number.
The curve as a wave
The curve goes through eight temperatures, one every two hours, joined by Bézier curves worked out with the Catmull-Rom method; the scale is the whole week's, so a cold day sits lower. Changing day each point goes to the new temperature a moment after the one before, and a timeline redraws the line and the area every frame.
The hour under the pointer, the keys and the preview
The pointer or the finger on the curve takes the nearest hour: a thin line comes down from the curve and the label follows it with quickTo. With the keys the curve is a slider (arrows, Home and End) and the days are a group of choices. The card's colour lives in three CSS variables that GSAP takes to the colours of the new sky. A click from a script (the library's preview) goes to the next day and every third time runs a pretend pointer along the curve.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PLACE | script.js | 'Madonna di Campiglio' | The place. |
DAYS | script.js | [['Friday', 'sunny', [2, 5, 9, 12, 14, 13, 10, 6], 0, 8], …] | The week: the day, its sky (sunny, partly, cloudy, rain, storm, snow), the temperature every two hours from 6 am, the chance of rain or snow and the wind. |
CHANGE | script.js | 0.8 | The seconds the sky, the colours and the curve take to change. |
SUN_TURN | script.js | 40 | The seconds the sun's rays take to go round once. |
DROPS | script.js | 8 | How many drops of rain, or flakes of snow, fall from the big icon. |
SKIES | script.js | { sunny: ['Sunny', '#fff6df', '#ffe4ad', '#f2a516'], … } | The skies: the name, the card's colours at the top and at the bottom, the colour of the curve. |
When to use it
For the site of a mountain hut, a hotel or a farm stay, a resort's app, an outdoor events page, a dashboard, any card that changes state with a drawn icon.
On phones
The card is at most 400 pixels wide and fits whole; a finger resting on the curve shows the hour and follows it sideways, and a moment after it lifts the hour goes. Vertically the page scrolls as usual (touch-action pan-y).
With reduced motion
Everything changes at once: the pieces of the icon, the colours, the curve and the figures; the rays do not turn, the drops and the flakes stay still, the lightning stays lit without flashing, no hop and no entrance.
Pitfalls
- GSAP rewrites the transform attribute of an SVG element it animates: if the piece is put in its place with transform, the first tween moves it. The place goes on an outer group that is never animated.
- Drops that all start at the same instant fall like a curtain: each loop has to start at a random point.
- A rolling word must stop the whole timeline of the roll before: with quick clicks the late callback would write the old word back.
- With each day's scale taken from the day itself, a cold day would look as warm as a hot one: the scale is the week's.
- On the curve touch-action pan-y leaves the vertical scrolling to the page and gives the sideways moves to the script; a vertical move cancels the gesture (pointercancel) and the hour goes.
Libraries
GSAP 3.15.0, Quicksand (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 9.1 KB; the libraries: GSAP 28 KB.
Testing
Tested on 3 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
