Slices into bars

SVG, TransitionsGSAPAdvancedCompressed weight: Demo 6.7 KBGSAP 28 KBFreeDownload the zip

A thin-outlined pie chart with the largest slice in the accent colour: one at a time the slices spring out, slide into a row and straighten into bars as long as their own arcs, while each name and share takes weight. Then the bars bend back and close into the pie. Minimal style.

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>Slices into bars</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>
  <main class="stage" data-stage>
    <!-- a thin pie chart of where a made-up coffee roaster's orders come from. One at a time the slices spring out,
         slide into a row and straighten into bars as long as their own arcs; the name and the share of each bar take
         weight as it lands. Then the bars bend back and close into the pie -->
    <svg class="figure" data-figure role="img" aria-label="Orders by channel: a pie chart that turns into bars">
      <circle class="guide" data-guide r="100" />
      <g class="pie" data-pie></g>
      <g class="labels" data-labels aria-hidden="true"></g>
    </svg>
    <p class="caption">
      <span class="caption__name">Brindle</span>
      <span class="caption__note">orders by channel, 2025</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.

22 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 “Slices into bars” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a warm white page a hairline circle draws itself, then the pie fills it turning clockwise, slice after slice, with a small settle of the rotation: four sales channels of a made-up coffee roaster, Brindle. The largest slice, Online, fills with vermilion. After a beat the orange slice springs a finger's width out of the pie, then slides to the right and straightens on the way: its outer arc opens up like a line unrolling and the wedge thins down, until it is a straight bar exactly as long as its arc. As it lands it squashes a hair and settles; its name rises above and takes weight, and beside it the share counts up from zero, narrow and light, then wide and full. The other slices follow one at a time, lined up underneath. Where the pie was, only the hairline circle is left. After a few seconds the names fade, the bars bend back into slices and go home in the same order, each one clicking into place on a spring, and the closed pie gives a small elastic kick. Then it all starts again. On a phone the row sits under the pie. A click or a tap starts it over.

How it works

A slice is a bent band

Every slice is drawn as a band bent round a circle: its outer edge is an arc of fixed length and curvature kap, its inner edge sits further in by a thickness thick. With kap = 1/R and thick = R the inner edge shrinks into the centre and it is a pie wedge; with kap = 0 and thick = BAR it is a straight bar. The shape function samples the two edges in 44 points and joins them into a closed path.

The bar is as long as the arc

While it straightens the slice never changes the length of its outer edge: only the curvature changes, from 1/R to zero. So every bar is exactly as long as its arc, R times the angle, and the bars are in proportion to the shares without any sums. The arc is written as sin(a)/kap and (1 − cos a)/kap, with a version for a curvature close to nothing, so the shape does not break when the curve opens up completely.

A quarter turn, never a half

Each slice hangs from the middle of its outer edge: in the pie that point is on the circle, along the bisector (plus POP when it springs out), in the row it is on the side of the bar. In between the script blends position and rotation. A slice from the lower half of the pie would land upside down and make a half turn: instead it lands with its outer edge underneath, which is the same bar, and turns a quarter at most.

The state and the drawing

Every slice has a state of numbers between 0 and 1: grow (the pie drawing itself), out (the spring out), m (the slide), k (the straightening), sq (the squash as it lands), and for the type nameIn, nameW, count and shareW. The timelines only move these numbers; on every frame drawAll redraws the slices, names and shares. The weight of the type goes on font-variation-settings, with Archivo's wght and wdth axes.

Direction that repeats

The pie drawing itself is one timeline; the round (the slices leaving, the pause, the way home, the pie's kick) is a second timeline with repeat: -1. Every tween is a fromTo with immediateRender: false: the starting values are written down, none is applied before its time, and the next round starts exactly the same. The slide uses EASE, the straightening a power2.inOut that starts a little later, the landing SETTLE.

Values to change

Name	File	Default	What it changes
`SHARES`	script.js	`[{ name: 'Online', value: 46 }, …]`	The channels and their orders, two to eight: the values become shares by themselves, and the largest takes the accent.
`POP`	script.js	`12`	How far a slice springs out of the pie before it leaves, in hundredths of the radius.
`STAGGER`	script.js	`0.6`	How many seconds pass between one slice leaving and the next.
`SLIDE`	script.js	`1`	How many seconds a slice takes to slide into its row and straighten (and to go back).
`EASE`	script.js	`'power3.inOut'`	The curve of the slide between the pie and the row.
`SETTLE`	script.js	`'elastic.out(1, 0.38)'`	How a bar settles as it lands and a slice as it clicks back into place: a smaller second number bounces more.
`BAR`	script.js	`12`	How thick the bars are, in hundredths of the radius.
`HOLD`	script.js	`2.4`	How many seconds the bars stay before they close back into the pie.

Try them in the Playground

When to use it

To tell a breakdown in a way people actually read: the results page of an online shop, the yearly figures of a non-profit, a dashboard summary, the numbers section of a landing page, the outcome of a survey. The pie says “these are parts of a whole”, the bars let you compare them: the animation gives both.

On phones

The same animation with the sizes adapted: the row of bars sits under the pie instead of beside it, the type is a little larger in proportion, and the slices go home starting from the bar nearest the pie, so none passes over the others. A tap starts it over.

With reduced motion

Nothing moves: the pie fades in already whole, then it fades out and the bars appear in its place with their names and shares already full; after the pause it goes back to the pie with another fade.

Pitfalls

With curvature and thickness both heading for zero, the thickness must always stay smaller than the radius of curvature (thick ≤ 1/kap): past it the inner edge crosses to the other side of the centre and the slice flips into a bow. The thickness drops with the square of (1 − k) while the radius grows as 1/(1 − k), and the drawing caps it at 1/kap anyway.
Slices from the lower half of the pie reached the row with a half turn, a visible somersault: now they land with their outer edge underneath, which once the bar is still is the same rectangle, and the rotation never goes past a quarter turn.
A fromTo inside a timeline applies its starting values as soon as it is created: while the round was being built, the tweens of the way home put the slices in the row at once and the opening pie drew itself already made of bars. The round's timeline has defaults: { immediateRender: false }, and once it is built the slices' state is set back to the pie.
On a phone the row sits under the pie: going home smallest first, the last bar passed over the others and over their names. The slices go home in the order they left, from the bar nearest the pie.
The weight of the share grows with a back.out that goes past its value: without a limit the wght axis would leave the font's range (100-900). The value is clamped before it is written.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Testing

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