The sliding puzzle logo

Intro, TextGSAPMediumCompressed weight: Demo 6.6 KBGSAP 28 KBFreeDownload the zip

A minimal-style logo intro: the letters of the brand are the tiles of a sliding puzzle, mixed up, in a thin frame. They slide one at a time into the empty cell, a pixel too far and back, until the name reads; then the missing piece, a red square, swells into the empty cell, the tiles lose their edges and close up into a two-line mark. A different puzzle every time.

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 sliding puzzle logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena" data-scene>
    <!-- the stage: the script draws the frame and the tiles, then slides them until the name reads -->
    <svg class="palco" data-stage role="img" aria-label="HALFWAY" xmlns="http://www.w3.org/2000/svg">
      <g data-board>
        <rect class="cornice" data-frame />
        <g data-tiles></g>
        <rect class="tassello" data-piece />
      </g>
    </svg>
    <button class="ancora" type="button" data-replay>Replay</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.

16 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 sliding puzzle logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white page a thin frame with rounded corners draws itself all round, and seven pale tiles with one-pixel edges drop into it, row by row: they are the letters of HALFWAY, the made-up brand, but mixed up, and one cell stays empty. Then the tiles slide one at a time into the empty cell, the first ones slowly, faster in the middle and slowly again at the end: while it slides a letter gets lighter and narrower, it lands a pixel past its cell and a spring pulls it back, heavier for a moment; the tile it stops against feels the knock and shivers. The moves are the real moves of a sliding puzzle. When the name reads, HALF above and WAY below, the missing piece, a red square, grows from the middle of the empty cell, a little bigger than it should be, settles, and the whole row feels the push. Then the frame and the tile edges fade, the letters close up into a mark set on two lines, with the red square at the end like a full stop, and take their weight. The logo stays still; a small Replay appears at the bottom. A click makes a new puzzle.

How it works

A real puzzle

The puzzle is mixed starting from the finished name: the empty cell takes MOVES random steps, never stepping straight back, and the list of cells it touched is the solution read backwards. So the moves are the ones a hand would really make, the puzzle always solves, and every Replay is different.

One timeline

The whole intro is one GSAP timeline built before it starts: for every move we know which tile goes where, so every slide is a tween in its place (with the labels solve, piece, close and rest). The pace changes along the puzzle with a small parabola on the duration: the first and last moves slow, the middle ones quick. One function writes all the positions, after every frame.

The extra pixel and the knock

Each tile goes with power3.inOut to a point SETTLE pixels past its cell and comes back with elastic.out(1, 0.35). Meanwhile the letter, an SVG text in Bricolage Grotesque, changes its variable axes: wght drops to 470 and wdth narrows while it slides, then rises past its weight as it lands and comes back. The tile right after it in the same direction, if there is one, moves a pixel and back: it looks as if it felt the knock.

From puzzle to mark

At the end the name is set again as real type: the letter widths are measured on a canvas in the same face, the rows are set flush left with TRACK and LEADING, and every tile goes where its letter would sit in a set word. The red square shrinks to the height of a capital and lands at the end of the second row, a pixel low and then in its place. Edges and frame vanish with fill-opacity and stroke-opacity.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'HALFWAY'`	The logo: its letters fill the tiles row by row, the last cell is the red square.
`ROWS`	script.js	`2`	How many rows of tiles (and of lines in the finished mark).
`MOVES`	script.js	`12`	How many slides it takes to solve the puzzle.
`SLIDE`	script.js	`0.32`	The seconds of one slide in the middle of the puzzle (the first and last ones are slower).
`SETTLE`	script.js	`1.2`	How many pixels a tile passes its cell before the spring pulls it back.
`GAP`	script.js	`0.08`	The space between the tiles, in tile sizes.
`TRACK`	script.js	`0.06`	The letter spacing of the finished mark, in em.
`LEADING`	script.js	`1.3`	The distance between the lines of the finished mark, in capital heights.
`SPEED`	script.js	`1`	The speed of the whole intro: 2 is twice as fast, 0.5 half as fast.
`REPLAY`	script.js	`true`	The small Replay button that appears at the end (a click anywhere on the page restarts the intro anyway).

Try them in the Playground

When to use it

For the opening of a playful site: a design or game studio, a brand with a two-word name, an agency that wants to say “the missing piece”, a portfolio, the holding page of a launch. It suits short names, from five to eleven letters.

On phones

The same puzzle with the same moves, with smaller tiles so that the frame fits the width of the screen. A tap restarts it.

With reduced motion

Nothing slides: the finished mark, with its red square, fades in.

Pitfalls

A timeline built in advance with tweens overlapping on the same tile (the settle of one move and the knock of the next) only works if the tweens start in time order: GSAP renders the children in the order they start and the last one wins.
A random walk of the empty cell on a single row reaches the end and has no neighbour left but the one it came from: in that case it steps back, otherwise the next step is undefined and the timeline breaks.
Square tiles as wide as the widest capital leave too much room around narrow letters: the final mark does not just close the gaps, it sets the word again with the true letter widths.

Libraries

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

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

Testing

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