veltman/flubber

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

Mindmap

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

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

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

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

USE CASE 2

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

USE CASE 3

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

Tech stack

JavaScriptSVGD3npm

Getting it running

Difficulty · easy Time to first run · 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.

Copy-paste prompts

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?

Open on GitHub → Explain another repo

← veltman on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.