Liquid Fill

About Liquid Fill

A wavering surface climbs inside the outline, rocking as it rises, so the icon fills like a glass rather than a bar.

Part of Icon Animations. Runs 3 seconds by default, exports in 16:9, 9:16, 1:1 and 4:5, as MP4 or transparent WebM up to 8K.

Related animations

• Spin Loop

  2s

  The icon fades up and turns at a steady, unbroken rate. The plain loading turn every interface already speaks.

• Fill Wipe

  1.5s

  Colour floods up through the outline from the bottom edge until the icon reads solid. The moment a thing gets switched on.

• Radial Fill

  1.5s

  Colour blooms out of the centre of the icon and pushes to the edges, filling the shape from the inside out.

• Assemble In

  2s

  Every piece of the icon flies in from its own direction, spinning as it comes, and locks into place with a springy stop.

• Badge Reveal

  2s

  A bold badge bursts open with a shockwave ring and the icon pops on top. Great for success states.

• Buzz Nudge

  2s

  A tight, fast rattle that dies away almost as soon as it starts. The short negative buzz of a blocked action.

• Flip X

  2s

  The icon tips forward over its horizontal axis, squashing flat through the turn before landing face on again.

• Flip Y

  2s

  The icon turns on its vertical axis like a card, thinning to an edge and thickening as it comes back round to the front.