The tear between two sections

Scroll, TransitionsGSAP, CanvasAdvancedCompressed weight: Demo 6.0 KBGSAP + ScrollTrigger 45 KBFreeDownload the zip

Scroll inside the preview

Between one section and the next the page tears as you scroll: the tear runs from one side to the other along a ragged line, a band of white fibre is left under the edge and the strip coming away curls over, showing the grey of its back.

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="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The tear between two sections</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the page of a made-up comedy tour. Between one section and the next the page does not slide: the sheet above is
       torn off as you scroll, from one side to the other, and the torn strip curls back showing the grey of its back -->
  <main>
    <section class="sezione sezione--carbone">
      <p class="occhiello">The Small Hours Tour</p>
      <h1 class="titolo">Jokes told<br>past <em>bedtime</em></h1>
      <p class="sotto">Scroll down: the page tears.</p>
    </section>

    <div class="strappo" data-strappo data-sopra="--carbone" data-sotto="--notte" aria-hidden="true">
      <canvas class="strappo__tela"></canvas>
    </div>

    <section class="sezione sezione--notte">
      <h2 class="titolo titolo--medio">Where to <em>find us</em></h2>
      <ul class="date">
        <li><span class="date__giorno">14 Nov</span><span class="date__luogo">Leeds, The Night Owl</span><span class="date__nota">Late show</span></li>
        <li><span class="date__giorno">22 Nov</span><span class="date__luogo">Glasgow, The Lamplighter</span><span class="date__nota">Two nights</span></li>
        <li><span class="date__giorno">03 Dec</span><span class="date__luogo">Bristol, Little Moon Hall</span><span class="date__nota">Sold out</span></li>
        <li><span class="date__giorno">11 Dec</span><span class="date__luogo">Dublin, The Quiet Room</span><span class="date__nota">Late show</span></li>
      </ul>
    </section>

    <!-- the second tear goes the other way: mirrored, with the colours swapped -->
    <div class="strappo" data-strappo data-sopra="--notte" data-sotto="--carbone" data-rovescio aria-hidden="true">
      <canvas class="strappo__tela"></canvas>
    </div>

    <section class="sezione sezione--carbone sezione--fine">
      <h2 class="titolo titolo--medio">See you <em>after midnight</em></h2>
      <p class="sotto">Doors at eleven. Bring a friend who laughs loudly.</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>

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.

38 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 tear between two sections” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The page of a made-up comedy tour, The Small Hours Tour, in two dark colours: charcoal and night blue. Between the first section and the second there is no straight border: as you scroll, the charcoal sheet starts tearing on the right side, slowly, and then faster and faster towards the left. Where the tear has passed, the edge of the sheet is ragged and slopes a little, under it there is a band of white paper, thin on one side and thick on the other, and below that the blue section. Right at the tip of the tear the strip coming away folds back: a tongue of grey paper, frayed along its edge, with its shadow on the blue. Bring the mouse near the tip and the tear goes a little further. Between the second section and the last there is another tear, reversed: it starts on the left and has the colours swapped.

How it works

A single number

Each tear is a band between two sections with a canvas in it, and everything you see depends on one number: how far the tear has gone. ScrollTrigger takes it from 0 to OVERSHOOT while you scroll LENGTH band heights, centred on when the band passes the bottom of the screen, on the EASE curve: power3.in starts very slow and ends in a rush. Past 1 the tip has already left the screen, and the curl with it.

The ragged edge

The edge is a line sloping by SLOPE degrees, moved by noise: a random value at every whole number and a smooth curve between one and the next. The large noise gives the shape, the fine one, mixed in by DETAIL, makes it rough; how far the line strays from straight is RAGGED, in widths. The line is worked out once per width, one point every three pixels, and then only read.

The white fibre

Under the edge, where the tear has passed, there is the torn paper: a paper-coloured band up to FIBRE of the band tall, with a third noise that makes it thick in one place and thin in another and grows from a quarter to full towards the side the tear starts from; its lower edge is frayed by a very fine noise. Over the paper there is a grain made only once, laid on with multiply, and a thread of light along the edge.

The curling strip

At the tip the sheet has not come away yet: on the left it is whole, on the right it is cut along the edge. The curl is a tongue that starts at the tip, goes down to the bottom bending a little and is CURL of the band wide at the bottom. Its outer edge is swollen and frayed like a real tear; its colour is the paper, with the grain and a shading that is dark on the fold, light in the middle and dark again outside, which makes it look rolled. Its shadow on the blue is SHADOW strong and fades away in the last tenths of the tear.

The mouse and the reverse

The mouse, from -1 to 1 across the band and followed softly, counts more the closer it is to the tip: there it pushes the tip on by up to PULL of the width and widens the curl a little. The reversed tear is the same drawing mirrored with a scale of -1 and the two colours swapped, read from the data-sopra and data-sotto attributes. The canvas is painted again only while the band is on screen and something has changed.

Values to change

Name	File	Default	What it changes
`SLOPE`	script.js	`11.25`	How much the tear slopes, in degrees (an eighth of a right angle on the site).
`RAGGED`	script.js	`0.04`	How far the edge strays from straight, in widths (0.04 on the site).
`DETAIL`	script.js	`0.25`	How much of the fine noise goes into the edge (0.25 on the site).
`FIBRE`	script.js	`0.15`	The thickest the white fibre can be, in bands (0.15 on the site).
`CURL`	script.js	`0.3`	How wide the curling strip is at the bottom, in bands.
`SHADOW`	script.js	`0.66`	How dark the shadow of the curl is (0.66 on the site).
`LENGTH`	script.js	`1.7`	How many band heights of scrolling the tear lasts (1.7 on the site).
`OVERSHOOT`	script.js	`1.15`	How far the number goes: past 1 the curl leaves the screen (1.15 on the site).
`PULL`	script.js	`0.04`	How far the mouse can pull the tip on, in widths.
`EASE`	script.js	`'power3.in'`	The curve from the scroll to the tear (power3.in on the site).

Try them in the Playground

When to use it

For the passage between two sections of different colours on a page with a handmade, collage or magazine feel: an artist, a festival, a venue, a book. One or two per page, where the subject changes.

On phones

The same: the band is lower, the edge is shorter and the curl narrower; it all moves with the finger as with scrolling on a computer.

With reduced motion

The tear is already over: the ragged edge and the white fibre are in place, with no curl and no movement.

Pitfalls

The noise must be worked out in pixels over the design width, not in hundredths of the band: otherwise on a narrow screen the edge becomes a fine saw and on a wide one a hill.
With the reversed tear the drawing is mirrored with ctx.scale(-1, 1), but the mouse stays in the direction of the screen: it must be turned too, or the tip runs off the wrong way.
The shadow of the curl with shadowBlur must be drawn before the grain and the shading, which go on the same path with no shadow: otherwise every layer adds its own and the blue turns black.
The canvas must be measured again on every ScrollTrigger refresh and not only on resize: when the fonts arrive the sections grow taller and the band moves.

Libraries

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Inter Tight (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 6.0 KB; the libraries: GSAP + ScrollTrigger 45 KB.

Testing

Tested on 8 October 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.