The word that skips rope

Physics, TextGSAP, CanvasMediumCompressed weight: Demo 7.7 KBGSAP 28 KBFreeDownload the zip

A minimal-style text and physics animation: on a hairline floor the word ‘Skip’ skips a real rope, a chain of points swung by two handles. The rope passes behind the word over the letters, comes down in front and runs under them while they are in the air; each letter crouches, jumps and lands with a squash, and every so often there is a double-under.

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>Ropewell</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a word skipping a jump rope: the rope is a chain of points swung by two handles, drawn on two canvases (the
       part behind the letters and the part in front of them); the whole stage is the button that changes the pace -->
  <main class="stage" data-stage tabindex="0" role="button" aria-label="A word skipping a jump rope. Press to change the pace.">
    <canvas class="layer layer--back" data-back aria-hidden="true"></canvas>
    <div class="word" data-word aria-hidden="true"></div>
    <canvas class="layer layer--front" data-front aria-hidden="true"></canvas>

    <p class="brand">Ropewell</p>
    <p class="count" data-count-box><span class="count__label">Jumps</span> <b class="count__value" data-count>0</b></p>
    <p class="hint"><span data-hint>Click to change the pace</span> <span class="hint__pace" data-pace>Steady</span></p>
  </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.

21 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 word that skips rope” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

An empty warm white room and a hairline floor that draws itself from the middle. The letters of ‘Skip’ drop onto the line one after another, squash for a moment and straighten up; the line gives under each of them. Two small handles appear at the sides and a thin rope lies on the floor under the word. The rope rises behind the letters, thinner and paler because it is far away, passes over their heads, comes down in front, darker and thicker, and runs under their feet. The letters feel it coming: they crouch, widening and gaining weight, jump on a true parabola, narrowing and getting lighter, and land with a squash and a little bounce, while the floor line gives under each one. The letters at the sides jump first and those in the middle a moment later, because the middle of the rope trails behind the handles. Every five jumps there is a double-under: the word jumps higher and the rope turns under it twice. At the top right a counter says how many turns the rope has made; on the tenth and the twentieth the number lights up in vermilion for a moment, and after the twentieth it starts again from zero. A click (or a tap, or Enter) switches from the steady pace to the quick one and back, without stopping the rope.

How it works

A real rope

The rope is a chain of twenty-eight points in three dimensions, integrated with the Verlet method at a fixed step of 1/240 of a second: each point keeps its speed, falls with gravity and has a length constraint with its neighbour. The two ends are the handles, which turn on two small circles at the sides. Each point is also pulled by a spring towards the shape the swing wants (a wide arc that reaches full radius a short way from the handles and whose middle trails by LAG radians): so the rope keeps its shape but bends, trails and wobbles like a real rope.

In front and behind

The third coordinate says whether a piece of rope is in front of the word or behind it. The pieces behind are drawn on a canvas under the letters, those in front on a canvas over them; thickness and colour go from thin grey to full black with the distance, so the depth reads without shadows. The floor stops the rope: no point goes below the line.

Directing the jumps

A single repeating GSAP timeline drives the angle of the swing: one full turn in TEMPO seconds, at constant speed, and a faster double turn every DOUBLE_EVERY jumps. Each letter’s jumps sit in the same timeline, centred on the moment the rope passes under: a crouch (scale and weight), a parabola going up with power2.out and down with power2.in, a squash on landing and a return with back.out. Each letter starts late by LAG times the sine of its position divided by the speed of the swing: the real delay of the middle of the rope.

The axes of the type

The letters are variable Archivo, each one standing with its baseline on the floor line (a zero-size mark inside the letter tells where the baseline is). Crouching they widen up to 106% and gain weight up to 720, in the air they narrow to 96% and lighten to 560, landing they go back to 640. The floor line is a path redrawn on every frame: each landing adds a little dip that straightens with elastic.out.

The pace and the counter

A click changes the speed of the timeline (timeScale) with a six-tenths-of-a-second tween: the rope speeds up or slows down without skipping a turn. The counter counts the rope’s passes under the word, lights up on the tenth and the twentieth and starts again at every repeat of the timeline. With reduced motion the word and the rope stand still and the counter counts slowly, with a fade.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Skip'`	The word that skips (up to 8 letters).
`TEMPO`	script.js	`0.66`	How many seconds one turn of the rope takes at the steady pace.
`QUICK`	script.js	`1.45`	How much faster the quick pace is.
`JUMP_HEIGHT`	script.js	`0.42`	How high the letters jump, compared with their size.
`DOUBLE_EVERY`	script.js	`5`	How many jumps between double-unders (0 = never).
`SET`	script.js	`20`	After how many turns the counter starts again.
`ROPE_POINTS`	script.js	`28`	How many points the rope chain has.
`GRAVITY`	script.js	`1400`	How hard the rope falls, in pixels per second squared.
`STIFFNESS`	script.js	`520`	How tightly the rope keeps to the swing: lower sags and trails more.
`LAG`	script.js	`0.5`	How far the middle of the rope trails behind the handles, in radians.

Try them in the Playground

When to use it

For the page of a gym, a training class or a fitness app: the name or a watchword moving in time at the top of the page, an empty or waiting page, the banner of a sports event.

On phones

The same animation with the sizes adapted: the word is larger in proportion and the rope with its handles always stays inside the screen. A tap changes the pace.

With reduced motion

Nothing moves: the word stands on the line and the rope lies under it; the counter counts slowly, with a fade.

Pitfalls

Width and weight changed too much (from 92 to 112% and from 480 to 760): in the air the word looked like another typeface, narrow and spaced out, because each letter keeps its centre in place. The range is now 96-106% and 560-720.
The rope drawn as straight segments looked broken: each piece now runs from the middle of one link to the middle of the next, with the point as the control of a curve, and there are twenty-eight points.
The trailing of the middle of the rope also applied when the rope was still: with reduced motion and in the opening, the rope lying on the floor had a hump that crossed the letters. The trailing now grows with the spin (spin from 0 to 1 as the first turn starts) and is zero when the rope is still.
With a sine-shaped rope profile, near the handles the rope stayed at half height even at the bottom of the swing and would have crossed the outer letters: full radius is reached a short way from the handles and all the letters stand in the full stretch.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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