Skip to content
animorio
IT
Back to the library

The loader that becomes a logo

A count up to a hundred, a rule that grows, then a rectangle that is revealed and turns into the logo while the lines emerge from the ink.

Transitions, SVG, TextGSAPMediumFree

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN.

Download the zip
<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Il caricamento che diventa marchio</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>
  <!-- i filtri "inchiostro" per le righe li crea lo script qui dentro -->
  <svg class="filtri" aria-hidden="true" focusable="false"><defs></defs></svg>

  <header class="angoli">
    <button type="button" class="angolo angolo--griglia" aria-label="Griglia"><span></span><span></span><span></span><span></span></button>
    <button type="button" class="angolo angolo--menu">Menu</button>
  </header>

  <main class="pagina">
    <div class="sinistra">
      <!-- il marchio: nasce rettangolo, poi il morph lo porta alla forma finale (data-forma) -->
      <div class="marchio">
        <svg viewBox="0 0 96 160" aria-hidden="true">
          <path class="marchio__forma" d="M0 0 L96 0 L96 160 L0 160 Z"
            data-forma="M48 4 C68 22 86 44 88 64 C78 68 72 80 78 92 C86 104 90 118 84 134 C76 150 62 158 44 158 C22 158 6 140 6 114 C6 88 22 66 34 48 C42 34 44 18 48 4 Z" />
        </svg>
      </div>
      <p class="meta" data-inchiostro>Disegno<br>e sviluppo</p>
      <p class="conta" aria-hidden="true"><span class="conta__riga"><span class="conta__cifre">0</span>%</span></p>
    </div>

    <span class="binario" aria-hidden="true"></span>

    <div class="destra">
      <p class="meta meta--su" data-inchiostro>Lavora da Brescia<br>con studi di tutta Europa</p>
      <h1 class="nome" data-inchiostro>Anna Ferri</h1>
      <p class="frase" data-inchiostro>Disegno prodotti digitali, interfacce e siti che si muovono.</p>
    </div>
  </main>

  <button type="button" class="rivedi" hidden>Rivedi il caricamento</button>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

What it does

On load a number climbs from zero to a hundred in the bottom corner, while a thin rule comes down from the top and splits the page into two columns. At a hundred the number leaves, the two corner buttons arrive diagonally from outside and the logo appears: first as a black rectangle revealed from the top, then the rectangle bends into the real shape. Together with it the lines of text come out one at a time, like ink blots that tighten until they become letters.

How it works

The count and the rule

An object { n: 0 } goes to 100 with the same power3.inOut curve that grows the rule from height 0 to 100%: number and rule arrive together. The number sits in a line with overflow clip, so it enters and leaves its mask with yPercent.

Buttons from the corners

When the count ends the two buttons start 6vw off screen on a diagonal and come back to zero with expo.out. It is a small detail, but it tells you the site is ready.

The rectangle that becomes a logo

The path starts as a rectangle (M0 0 L96 0 L96 160 L0 160 Z). First it is revealed with a clip-path inset from the top; then MorphSVG takes it to the shape written in data-forma. Starting from a simple shape makes the morph readable: you see the rectangle bend.

Lines out of the ink

SplitText splits the texts into lines and each line gets its own SVG filter: feGaussianBlur followed by feColorMatrix with a threshold on alpha. With a strong blur the line disappears completely; as stdDeviation goes down to zero, sharp blots appear and tighten into letters. At the end the filter is removed.

Values to change

NameFileDefaultWhat it changes
CONTEGGIOscript.js2.2Seconds to reach a hundred. On a real site tie it to real loading (images, fonts) with a minimum so it never just flashes.
SFOCATURAscript.js0.32The initial blur of each line, as a fraction of its height. Higher: the blots appear later and bigger.
SOGLIAscript.js0 0 0 22 -8The last row of the matrix that cuts the alpha. The first number hardens the edges, the second moves the point where the blot appears.
data-formaindex.htmlil germoglioThe final path of the logo: put yours, drawn in the same 96 x 160 box.

When to use it

For the entrance of a portfolio or a brand site, on the first visit. Not on every page: the second time the logo already in place should be enough.

On phones

The columns narrow to one against three; count, logo and lines stay the same. SVG filters on large text are heavy: keep them for the entrance only.

With reduced motion

No count: logo, buttons and texts are already in place.

Pitfalls

  • Split the text into lines only after document.fonts.ready: with the fallback font the lines break differently and the filter blurs the wrong line.
  • Enlarge the filter region (x, y, width, height): with the default values the blur gets cut into a rectangle.
  • At the end remove the filter (filter: none): the threshold makes letter edges slightly hard, and keeping a filter on large text is costly.
  • Save the starting path before the morph: to replay the animation put the rectangle back with attr d, otherwise MorphSVG starts from the final shape.

Libraries

GSAP 3.15.0, MorphSVG (GSAP) 3.15.0, SplitText (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 12 KB of our own files.

Testing

Tested on 26 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.

From the same family

All animations