The logo cut along the line

Intro, TransitionsGSAPAdvancedCompressed weight: Demo 13 KBGSAP 28 KBFreeDownload the zip

A logo intro for a tailor’s shop: the screen is covered by two pieces of wool with a chalk line between them. The letters fall from the middle, the shears cut along the line, a counter climbs in steps of five, the buttons roll in; then the cut opens and the two pieces lift off towards the edges, and the page is underneath. In the Playground you type your own name or upload your own logo.

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 logo cut along the line</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/400-italic.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the page of the tailor's shop: it waits under the cloth and comes in line by line once the cloth is cut -->
    <div class="pagina" data-page>
      <header class="testa riga" data-line>
        <span>Made to measure</span>
        <nav aria-label="Main"><a href="#fittings">Fittings</a><a href="#cloth">Cloth</a><a href="#visit">Visit</a></nav>
      </header>
      <div class="eroe">
        <h1 class="marchio riga" data-line data-page-logo>Bias Cut</h1>
        <!-- the seam under the logo: the stitches run in behind a little needle -->
        <svg class="cucitura riga" data-line data-seam aria-hidden="true">
          <defs><clipPath id="seam-clip"><rect data-seam-clip /></clipPath></defs>
          <path class="cucitura-punti" clip-path="url(#seam-clip)" data-seam-stitches />
          <g data-needle>
            <path class="ago" d="M-26 -1.6L2 -0.6Q5 0 2 0.6L-26 1.6Q-29 0 -26 -1.6Z" />
            <ellipse class="ago-cruna" cx="-22" cy="0" rx="2.6" ry="0.7" />
          </g>
        </svg>
        <p class="motto riga" data-line><em>Suits cut by hand,</em></p>
        <p class="motto riga" data-line><em>made to your measure.</em></p>
        <p class="orari riga" data-line>Fittings by appointment</p>
        <p class="riga" data-line>
          <a class="bottone" href="#fittings">
            <span class="bottone__fondo"></span>
            <span class="bottone__testo">Book a fitting</span>
            <svg class="bottone__freccia" viewBox="0 0 20 12" aria-hidden="true"><path d="M1 6H18M13 1.5L18 6L13 10.5" /></svg>
          </a>
        </p>
      </div>
      <p class="nota">Click or tap to see it again</p>
    </div>

    <!-- the cloth: two pieces of a sewing pattern with a chalk line between them. The script draws their cut edges every frame -->
    <svg class="palco" data-stage aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the twill of the wool: fine diagonal ribs -->
        <pattern id="twill" patternUnits="userSpaceOnUse" width="7" height="7" patternTransform="rotate(-38)">
          <rect class="trama-fondo" width="7" height="7" />
          <path class="trama" d="M0 1.6H7M0 5.1H7" />
        </pattern>
        <clipPath id="clip-top"><path data-clip-top /></clipPath>
        <clipPath id="clip-bottom"><path data-clip-bottom /></clipPath>
        <clipPath id="clip-count"><rect data-clip-count /></clipPath>
        <!-- the shade a lifting piece of cloth throws on the page -->
        <linearGradient id="shade-down" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="ombra" stop-opacity="0.32" />
          <stop offset="1" class="ombra" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="shade-up" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0" class="ombra" stop-opacity="0.32" />
          <stop offset="1" class="ombra" stop-opacity="0" />
        </linearGradient>
        <!-- a picture logo, written in chalk: its dark and coloured parts become chalk, its light parts stay cloth -->
        <filter id="chalk" color-interpolation-filters="sRGB">
          <feColorMatrix type="matrix" data-chalk-matrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -0.48 -0.94 -0.18 0 1.6" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>
      </defs>

      <rect fill="url(#shade-down)" data-shade-top />
      <rect fill="url(#shade-up)" data-shade-bottom />

      <!-- the upper piece: the logo, the counter and the cutting note -->
      <g clip-path="url(#clip-top)">
        <rect class="stoffa" data-cloth-top />
        <rect fill="url(#twill)" data-twill-top />
        <g data-top></g>
      </g>
      <!-- the lower piece: the grainline and the buttons -->
      <g clip-path="url(#clip-bottom)">
        <rect class="stoffa" data-cloth-bottom />
        <rect fill="url(#twill)" data-twill-bottom />
        <g data-bottom></g>
      </g>
      <path class="cimosa" data-edge-top />
      <path class="cimosa" data-edge-bottom />

      <!-- the chalk line: dashed ahead of the shears, a clean cut behind them -->
      <g data-line-all>
        <path class="linea-tratteggio" data-dash />
        <path class="linea-taglio" data-cut />
      </g>

      <!-- the tailor's shears; the pivot screw is 0 0, the blades point right -->
      <g data-shears>
        <g data-blade-b>
          <g transform="scale(1 -1)">
            <path class="anello-bordo" d="M-3 2C-10 6 -17 10 -24 14" />
            <ellipse class="anello-bordo" cx="-34" cy="18" rx="11" ry="7.5" transform="rotate(-24 -34 18)" />
            <path class="anello" d="M-3 2C-10 6 -17 10 -24 14" />
            <ellipse class="anello" cx="-34" cy="18" rx="11" ry="7.5" transform="rotate(-24 -34 18)" />
            <path class="lama" d="M-6 0.8L62 0.8Q66.5 0.4 64 -1.2C48 -4.6 22 -9 2 -9.5C-5 -9.5 -9 -4 -6 0.8Z" />
            <path class="lama-filo" d="M4 -0.6L59 -0.6" />
          </g>
        </g>
        <g data-blade-a>
          <path class="anello-bordo" d="M-3 2C-10 6 -17 10 -24 14" />
          <ellipse class="anello-bordo" cx="-34" cy="18" rx="11" ry="7.5" transform="rotate(-24 -34 18)" />
          <path class="anello" d="M-3 2C-10 6 -17 10 -24 14" />
          <ellipse class="anello" cx="-34" cy="18" rx="11" ry="7.5" transform="rotate(-24 -34 18)" />
          <path class="lama" d="M-6 0.8L62 0.8Q66.5 0.4 64 -1.2C48 -4.6 22 -9 2 -9.5C-5 -9.5 -9 -4 -6 0.8Z" />
          <path class="lama-lume" d="M6 -6.4C24 -6.6 44 -4.4 58 -1.8" />
        </g>
        <circle class="vite" r="3.4" />
        <circle class="vite-lume" cx="-0.9" cy="-0.9" r="1.1" />
      </g>
    </svg>
  </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.

35 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 logo cut along the line” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The screen is covered by two pieces of midnight-blue wool with a diagonal twill, like the pieces of a sewing pattern: the upper one says “Front panel”, the lower one “Back panel”, and between them runs a dashed chalk line with the words “Cut on the chalk line” and three arrows. A pair of tailor’s shears with red handles pops onto the line and snips twice at the air. From above fall the letters of a made-up tailor’s brand, Bias Cut: the middle ones arrive first, a little crooked, and straighten as they land. Meanwhile the shears run along the line opening and closing their blades, and behind them the dashes turn into a clean cut; the arrows light up one after another; on the left a rolling counter climbs to 100 centimetres in steps of five, like a little odometer; on the lower piece the grainline draws itself, the arrow that shows the direction of the cloth, and five buttons roll in from the left, from a diamond to a round one, and line up. Once the cut is done the slit springs open and shows the zigzag teeth of pinking shears, the buttons roll away to the right and the two pieces lift off towards the edges: the upper one, 60% of the screen, goes up, the lower one, 40%, goes down, slowly at first and then faster and faster, like cloth pulled off a table, with a soft shade on the page. Underneath is the page of the tailor’s shop, paper coloured: it comes in line by line out of a blur, with the logo in red, and a needle sews a running seam under the logo. After a few seconds the page fades, the two pieces close again on the line with a little bounce and it all starts over. A click restarts it. A picture can take the place of the word: on the cloth it turns into chalk, on the page it keeps its own colours.

How it works

One size

The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel, and underneath sits the real page, in HTML. The line cuts the screen at 60% of its height (TOP): the logo is measured on a canvas in the same typeface (measureText, actualBoundingBoxAscent for the true height) and takes the biggest size that fits the width and the room between the notes of the upper piece. The notes, the shears, the buttons and the teeth of the edge are counted on the short side of the window, with a minimum and a maximum, so they stay readable on a phone and do not grow huge on a big monitor.

Two pieces drawn every frame

Each piece of cloth is a path rebuilt every frame from two numbers: how far it has lifted and how wide the cut has opened. The cut edge is a zigzag: the teeth of the upper piece fall exactly into the gaps of the lower one, so while they are closed nothing shows. The same path is the clipPath of the piece’s content (logo, counter, notes, buttons), which is therefore cut away as the cloth lifts. Under each edge a rectangle with a gradient makes the shade on the page, stronger while the pieces are close and gone once they have left.

The shears and the counter

The shears are two equal halves (blade and ring) turning on the screw: one is a copy of the other flipped with scale(1 -1), and the script opens them by ±SNIP/2 degrees. They run from 7% of the width to off screen in 3 seconds with power1.inOut, that is inOutQuad, and the clean line goes from 9% to 102.5% with the same progress; nine yoyo snips open and close them on the way. The counter is three strips of digits inside a clipped window: the units roll all the time (STEP at a time), the tens and the hundreds only turn when the units pass their last step, like an odometer. An object goes from 0 to 100 in 3 seconds with power2.inOut and the strips follow it.

Direction

The whole intro is one timeline, with the labels start, fall, cut, open, reveal, rest and close and timeScale for the speed. The letters fall in 2 seconds with power1.out and a 0.05 stagger from the centre; the buttons come in from −80% of the width in 2.8, 2.7, 2.6… seconds with power2.inOut (inOutCubic) and turn by how far they travel divided by their radius, so they really roll. Once the cut is done the slit opens with elastic.out, the buttons leave, and 0.15 seconds later the pieces lift off in 1.5 seconds on the curve cubic-bezier(0.55, 0.055, 0.675, 0.19): GSAP does not have it among its own, so the script works it out itself (Newton and, when needed, bisection) and passes it as a function.

The page and your logo

The page underneath is plain HTML: each line goes from opacity 0, a 10 pixel blur and 15 pixels lower to sharp in 0.6 seconds with a 0.1 stagger, then the filter is removed altogether. The seam is a dashed path uncovered by a widening clipPath, and the needle follows its tip, bobbing up and down at every stitch. If IMAGE holds an address, the logo becomes that picture: on the cloth a feColorMatrix filter turns it into chalk (the dark and coloured parts become chalk, the light parts and the transparent background stay cloth), on the page it stays as it is. In the Playground, next to the field, there is a button to upload a file, which goes into the code as a data: address.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'BIAS CUT'`	The logo as a word: each letter falls on its own, the middle ones first. It is also the logo of the page underneath.
`IMAGE`	script.js	`''`	The logo as a picture: the address of a file, or upload it from your computer. If there is one, it takes the place of the word: in chalk on the cloth, in its own colours on the page.
`TOP`	script.js	`0.6`	Where the line runs: how much of the screen the upper piece takes (0.6 = 60%); the lower one takes the rest.
`STEP`	script.js	`5`	How much the counter climbs at each turn of its rollers: 1, 2, 5 or 10.
`BUTTONS`	script.js	`5`	How many buttons roll in on the lower piece: each one has one more side, the last is round (0 = none).
`SNIP`	script.js	`28`	How wide the shears open at every snip, in degrees (0 = they stay shut and slide).
`SPEED`	script.js	`1`	The speed of the whole animation: 2 is twice as fast, 0.5 half as fast.
`REST`	script.js	`4`	How many seconds the page stays on show before the cloth comes back to cover it.
`LOOP`	script.js	`true`	Whether the cloth comes back over the page and it all starts again. With false the page stays uncovered.

Try them in the Playground

When to use it

For the loading screen or the opening of a site that works with hands and cloth: a tailor’s shop, a fabric store, a clothing brand, a haberdashery, a sewing school; or to present a logo to a client or in a post. The cut that opens is also a transition from a cover to the real page, good for any site that wants a bold entrance. It works with a written wordmark and with a picture.

On phones

The same animation with the sizes adapted: the logo is almost as wide as the screen, the notes, the shears and the buttons have a minimum size to stay readable, and the teeth of the edge get finer. A tap restarts it.

With reduced motion

Nothing moves: the cloth is shown already cut, with the logo in place, the counter at 100 and the buttons in a row; then it fades away and the page fades in in its place, with no movement either. If the animation starts again, the page fades and the cloth fades back in.

Pitfalls

With the upper piece fully lifted, the tips of the zigzag teeth stayed peeking one pixel into the top of the screen like a row of dots: at the end of their run the pieces go a little past the edge, by two teeth.
The opacity of the “CM” next to the counter, set as an attribute, did not go away: its CSS class already gave it an opacity, and CSS beats the presentation attribute. For elements with an opacity in the CSS, change style.opacity.
In the narrow slit the two shades, one per edge, added up and filled it with flat grey: the shade starts lighter and only gets stronger once the pieces really move apart.
The curve the cloth peels off with, cubic-bezier(0.55, 0.055, 0.675, 0.19), is not one of GSAP’s and CustomEase is one more file: a twenty-line function works it out, and GSAP takes a function as an ease directly.
A counter whose three strips all roll together shows the hundreds half way through when the number is 50: the tens and the hundreds only turn when the units pass their last step, like an odometer.
Once the blur is over, filter: blur(0px) stays on the line, keeps it on a layer of its own and in some browsers leaves the text slightly soft: at the end of the intro the filter is removed with filter: none.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0, Geist Mono (font variabile) 5.3.0, Instrument Serif 5.3.0.

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

Testing

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