git404hub

what is flubber fr?

veltman/flubber — explained in plain English

Analysis updated 2026-06-24

6,907JavaScriptAudience · developerComplexity · 2/5Setup · easy

tl;dr

Flubber is a JavaScript library that smoothly animates between any two shapes on a web page, turning abrupt shape transitions into fluid morphing animations for data visualizations.

vibe map

mindmap
  root((flubber))
    What it does
      Shape morphing
      Smooth animation
      Best-guess interpolation
    Input formats
      SVG path strings
      Coordinate arrays
    Use cases
      Data visualization
      UI animations
      Chart transitions
    Helpers
      toPathString
      splitPathString
      Merge and split

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Animate a bar chart morphing into a pie chart in a D3 visualization with a smooth transition.

VIBE 2

Create UI animations where a loading spinner transforms into a checkmark or error icon.

VIBE 3

Animate multiple shapes merging into one or one shape splitting into many in an interactive data story.

what's the stack?

JavaScriptSVGD3npm

how it stacks up fr

veltman/flubberai/size-limitsindresorhus/query-string
Stars6,9076,9066,903
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 30min

in plain english

This is a JavaScript library for animating smoothly between two different shapes on a web page. When you want to transition from one shape to another in a visualization or animation, simply changing the coordinates often produces jarring jumps and unexpected distortions, especially when the shapes have different numbers of points or very different structures. Flubber tries to figure out a reasonable in-between path for any pair of shapes, so the animation looks fluid rather than broken. You give it two shapes as input: either SVG path strings (the kind used in web graphics) or arrays of x-y coordinate pairs. It returns an interpolator function. That function accepts a number from 0 to 1, where 0 means the starting shape and 1 means the ending shape, and anything in between gives you a blended shape. You can call this function inside an animation loop or hand it directly to a library like D3. Beyond the basic interpolation between two shapes, there are specific helpers for animating a shape into or out of a circle or a rectangle. There are also methods for handling cases where one shape splits into multiple shapes, or multiple shapes merge into one. If you have a set of shapes that should each animate into a corresponding shape one-to-one, there is a method for that as well. The library includes two small utility functions: one converts an array of coordinate points into an SVG path string, and another splits a compound SVG path (one that describes multiple shapes in a single string) into an array of individual path strings. Flubber does not claim to produce geometrically perfect morphing. The README describes it as a "best-guess" approach that aims to be good enough for most visualization use cases without being overly complex. It is installed via npm and works in both browser and Node.js environments.

prompts (copy fr)

prompt 1
Using flubber, write a D3 animation that morphs an SVG circle into a star shape over 1 second when a button is clicked.
prompt 2
Show me how to use flubber to animate between two compound SVG paths that have different numbers of points.
prompt 3
Create a flubber animation where 5 separate SVG rectangles smoothly merge into a single shape as a user scrolls down.
prompt 4
How do I use flubber's interpolateAll to animate a set of country map shapes transitioning into bar chart rectangles?

Frequently asked questions

what is flubber fr?

Flubber is a JavaScript library that smoothly animates between any two shapes on a web page, turning abrupt shape transitions into fluid morphing animations for data visualizations.

What language is flubber written in?

Mainly JavaScript. The stack also includes JavaScript, SVG, D3.

How hard is flubber to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is flubber for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.