Skip to content
animorio
IT
Back to the library

Titles coming into focus

As you scroll, each title arrives blurred and comes into focus in the first quarter of its run; then it rises slowly while the subtitle overtakes it faster.

Text, ScrollGSAPEasyFree

Scroll inside the preview

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>Titoli che vengono a fuoco</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>
  <main>
    <section class="apertura">
      <p class="sopra">Scorri piano</p>
      <p class="grande">I titoli arrivano sfocati e vengono a fuoco mentre scorri; poi salgono, e il sottotitolo li supera.</p>
    </section>

    <section class="capitolo" data-fuoco>
      <h2 class="titolo">Tutto parte<br>da una curva</h2>
      <p class="sottotitolo">Prima si decide come parte e come frena. Il resto viene dopo.</p>
    </section>

    <section class="citazione" data-citazione>
      <blockquote>«Un’animazione che arriva dritta sembra spinta. Una che frena sembra viva.»</blockquote>
    </section>

    <section class="capitolo" data-fuoco>
      <h2 class="titolo">Il tempo è<br>un materiale</h2>
      <p class="sottotitolo">Si taglia, si allunga, si piega: come il legno, ha una venatura.</p>
    </section>

    <section class="capitolo" data-fuoco>
      <h2 class="titolo">Il resto<br>è ritmo</h2>
      <p class="sottotitolo">Fine. Torna su e rifallo.</p>
    </section>
  </main>

  <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/ScrollTrigger.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

What it does

Each chapter has a huge title and a subtitle. As the chapter enters from below the title is blurred, semi-transparent and slightly lower; scrolling brings it into focus and into place. Then it keeps rising slowly, while the subtitle starts later and rises much faster, until it overtakes it. The quotes between chapters only come into focus.

How it works

One run per chapter

Each chapter has its own scrubbed timeline, from entering at the bottom to leaving at the top. Inside, durations are fractions of the run: focusing lasts 0.24, a quarter.

Coming into focus

The title goes from blur(14px), opacity 0.35 and yPercent 50 to sharp, solid and in place, with power2.out: it arrives decisively and then settles.

Two speeds

For the rest of the run the title rises by 30% of its height, the subtitle by 150%: same duration, different distances, so the subtitle goes faster and overtakes it. It is parallax without images.

Quotes

Quotes only focus, from blur(8px) to sharp, between entering and a little past the middle of the screen: they do not move, so they can be read.

Values to change

NameFileDefaultWhat it changes
SFOCATOscript.js14Pixels of blur on entry.
A_FUOCOscript.js0.24At which point of the run the title is sharp.
SU_TITOLO / SU_SOTTOscript.js-30 / -150How far title and subtitle rise after focusing.

When to use it

For chapter openers on a long page: reports, stories, manifestos. Not for text to be read continuously: a blurred paragraph is a paragraph nobody reads.

On phones

Identical. The blur filter on huge text is heavy: keep it for titles only.

With reduced motion

Titles and quotes are sharp and still.

Pitfalls

  • Blur costs more the bigger the text: do not use it on more than one title per screen.
  • Scrub with a small lag (0.8): without it the blur jumps with every wheel notch and looks stepped.
  • Give the chapter generous height (here one and a half screens), otherwise focusing and rising get squashed and look like a jump.

Libraries

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.

Weight: 5.2 KB of our own files.

Testing

Tested on 27 September 2026

  • Desktop: Done
  • Phone: Done
  • Reduced motion: Done
  • Safari on iPhone: To do

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