JSPM

Resonance | Data-driven transitions in React

Animated state transitions that update with your data. This library uses d3-timer to efficiently manage thousands of state tweens. You can apply high-performance state animations using an approachable, easy to implement syntax.

Get Started

Intro Blog Post

Installation

Resonance is available as an npm package.

npm install resonance

NodeGroup

The NodeGroup component allows you to create complex animated transitions. You pass it an array of objects and a key accessor function and it will run your enter, update and leave transitions as the data updates. The idea is similar to transition components like react-transition-group or react-motion's TransitionMotion but you use objects to express how you want your state to transition. Not only can you can have independent duration, delay and easing for entering, updating and leaving but each individual key in your state can define its own timing.

Documentation/Live Examples

Example Donut Chart

You can produce an animated donut chart with labels like the one below...

With a small amount of code like this...

<NodeGroup
  data={arcs}
  keyAccessor={(d) => d.data.name}

  start={({ startAngle }) => ({
    startAngle,
    endAngle: startAngle,
  })}

  enter={({ endAngle }) => ({
    endAngle: [endAngle],
    timing: { duration: 2000 },
  })}

  update={({ startAngle, endAngle }) => ({
    startAngle: [startAngle],
    endAngle: [endAngle],
    timing: { duration: 500 },
  })}

  leave={(data, index, remove) => {
    remove();
  }}

  render={({ data: { name } }, state) => {
    const p1 = outerArcPath.centroid(state);
    const p2 = [
      mid(state) ? p1[0] + (radius * 0.5) : p1[0] - (radius * 0.5),
      p1[1],
    ];

    return (
      <g>
        <path fill={colors(name)} d={innerArcPath(state)} />
        <text
          dy="4px"
          fontSize="12px"
          transform={`translate(${p2})`}
          textAnchor={mid(state) ? 'start' : 'end'}
        >{name}</text>
        <polyline
          fill="none"
          stroke="rgba(127,127,127,0.5)"
          points={`${innerArcPath.centroid(state)},${p1},${p2}`}
        />
      </g>
    );
  }}
/>

The full code for this donut chart example can be seen here.

Why would I need this?

Resonance handles much of the heavy lifting for...

• Create custom transitions easily
• Animate HTML, SVG, React-Native components...
• Transitioning numbers, strings, colors, SVG transforms...
• Setting transition durations and delays
• Handling transition interrupts
• Hooks for transition events (start, interrupt, end)
• Custom tween functions
• Specifying ease functions
• Stopping transitions on component unmount

Run documentation/examples locally

To run the documentation/examples site in this repo locally:

• clone the repo and cd into the directory
• npm install && cd docs && npm install && npm start
• go to http://localhost:3000/

SVG Chart Examples

You can animate anything with Resonance, but it was developed by experimenting with animated SVG charts and redux. This library is great for creating abstact animated data visualizations in React. You can view the example code here for the chart examples. Each example is a mini redux application with its actions and reducers defined in a small module. You can run these examples locally by following the direction above.