The scribble that reveals

Transitions, SVG, TextGSAPMediumCompressed weight: Demo 6.6 KBGSAP 28 KBFreeDownload the zip

The page arrives under an orange cover: a huge scribble of the same colour erases it, unrolling from start to end and getting thinner, and the page shows up between the strokes. The headline comes in letter by letter, with a bounce.

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.

Download the zip

<!doctype html>
<html lang="it" class="coperta">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lo scarabocchio che svela</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- la copertina: un fondo pieno, uno scarabocchio enorme dello stesso colore e il marchio.
       Lo script la cancella srotolando lo scarabocchio. -->
  <div class="copertina" data-copertina aria-hidden="true">
    <div class="copertina__fondo" data-fondo></div>
    <svg class="copertina__segno" data-segno><path class="copertina__tratto" data-tratto d="M0 0"/></svg>
    <div class="copertina__marchio" data-marchio>
      <svg class="tappo" viewBox="-60 -60 120 120"><path class="tappo__bordo" data-tappo d="M0 0"/><circle class="tappo__anello" r="37"/></svg>
      <span class="tappo__nome">sorso</span>
    </div>
  </div>

  <header class="testata" data-testata>
    <a class="testata__marchio" href="#">sorso</a>
    <nav class="testata__voci" aria-label="Menù">
      <a href="#">Le bibite</a>
      <a href="#">Dove trovarci</a>
      <a href="#">Scrivici</a>
    </nav>
  </header>

  <main class="prima">
    <!-- il poster sotto la copertina: cielo, sole e mare, tutto disegnato qui -->
    <div class="scena" aria-hidden="true">
      <div class="scena__sole"></div>
      <svg class="scena__mare" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <path class="onda onda--prima" d="M0 70 C 120 30 240 30 360 70 S 600 110 720 70 S 960 30 1080 70 S 1320 110 1440 70 S 1680 30 1800 70 S 2040 110 2160 70 V 320 H 0 Z"/>
        <path class="onda onda--seconda" d="M0 150 C 150 115 300 115 450 150 S 750 185 900 150 S 1200 115 1350 150 S 1650 185 1800 150 S 2100 115 2250 150 V 320 H 0 Z"/>
        <path class="onda onda--terza" d="M0 235 C 100 205 200 205 300 235 S 500 265 600 235 S 800 205 900 235 S 1100 265 1200 235 S 1400 205 1500 235 S 1700 265 1800 235 S 2000 205 2100 235 V 320 H 0 Z"/>
      </svg>
    </div>

    <div class="prima__testi">
      <p class="nota" data-nota>La pagina arriva coperta: uno scarabocchio arancio la cancella dall’inizio alla fine. Il bottone in basso lo fa ripartire.</p>
      <h1 class="titolo" data-titolo>Frizzante, ma con calma.</h1>
      <p class="sotto" data-sotto><span class="riga"><span class="riga__dentro">Bibite agli agrumi amari,</span></span> <span class="riga"><span class="riga__dentro">fatte a mano e senza fretta.</span></span></p>
    </div>

    <button class="rivedi" type="button" data-rivedi>
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.34-5.66" /><path d="M20 4v5h-5" /></svg>
      <span>Rivedi l’ingresso</span>
    </button>
  </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.

26 values to change

Open the Playground

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 scribble that reveals” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A summer poster, with a drawn sky, sun and sea, arrives covered by an orange ground with the brand in the middle, a bottle cap. Over the ground lies a scribble of the same orange: a single stroke going up and down from left to right, so wide that on its own it covers everything. The ground vanishes in a moment and the scribble starts unrolling from its beginning: the tip eats the stroke one leg after another, and meanwhile the rest gets thinner, so the page shows first between the strokes and then entirely. Halfway through, the header and the headline come in, letter by letter with a small bounce, while the last stroke leaves on the right. The button at the bottom plays the entrance again: the scribble redraws itself backwards, from end to start, and unrolls once more.

How it works

A single stroke

The scribble is one SVG path built on the size of the screen: it starts off screen at the top left, goes up and down towards the right with a step of 0.45 times its width, and halfway along every leg it swerves a little sideways. The points, picked at random with a fixed seed, become smooth curves, a Catmull-Rom written as Bézier curves. The initial width is 40% of the screen’s average diagonal: enough for the stroke alone to cover everything.

Eaten from the start

The stroke has a stroke-dasharray as long as itself and a stroke-dashoffset going from 0 to −L: the visible part runs from L × e to L, so the stroke is consumed from its beginning and its end leaves last. The progress e follows power1.inOut, over 2.4 seconds, after 1.2 seconds of still cover with the brand.

The ground leaves at once

In the first 12% of the unrolling the solid ground disappears: from then on, only the scribble uncovers the page. Right after, the stroke thins, with power2.out, down to 4.5% of the diagonal, so strips of page open between the legs before the tip gets there to eat them.

Entrances and the way back

At 36% of the unrolling the GSAP timeline brings in the header and the headline: every letter starts at scale 0.35, transparent and slightly lower, and lands with back.out, one every 30 milliseconds. To see the entrance again, the same progress goes back from 1 to 0 in 1.1 seconds: the stroke redraws itself from end to start, getting fatter as it goes.

Values to change

Name	File	Default	What it changes
`LARGO, SOTTILE`	script.js	`0.4, 0.045`	How wide the stroke is at the start and at the end, as a share of the screen’s average diagonal.
`FITTO`	script.js	`0.45`	The distance between one leg and the next, as a share of the initial width: above 0.5, triangles stay uncovered at the edges.
`DURATA, ATTESA`	script.js	`2.4, 1.2`	How long the unrolling lasts and how long the cover stays still before it starts, in seconds.
`RIDISEGNA`	script.js	`1.1`	How long the scribble takes to redraw itself when the entrance is played again.
`SEME`	script.js	`11`	Change the seed and the scribble changes shape.

Try them in the Playground

When to use it

For the entrance of a cheerful site that wants a hand-made gesture: a drink, an ice-cream shop, a summer festival, a creative studio. It shows the brand colour before the page itself.

On phones

The scribble is built on the phone’s size, so in portrait there are fewer, steeper legs. While the cover is on, the page background is orange too, so Safari tints its bars with the same colour.

With reduced motion

No scribble: the cover fades away and the page is already all in place; the button to replay the entrance is not there.

Pitfalls

If there is more than half a stroke width between one leg and the next, triangles of page stay uncovered at the edges when the ground vanishes: the step stays under half the initial width.
With round caps, a zero-length stroke still draws a circle: the scribble starts and ends off screen, further than half a width.
If the stroke only thins towards the end, it never reads as a scribble: it must thin as soon as the ground is gone, so the page shows between the legs before the tip eats them.
The split headline has to be hidden as soon as the script runs, under the cover, not when the animation starts: otherwise for one frame it already shows.

Libraries

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 6.6 KB; the libraries: GSAP 28 KB.

Testing

Tested on 28 September 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.