resonance: A JavaScript repository from YouriT

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.

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

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

  start={() => ({
    g: {
      opacity: 1e-6,
      transform: 'translate(0,0)',
    },
    circle: {
      r: 1e-6,
      strokeWidth: 1e-6,
      fill: 'green',
    },
  })}

  enter={(data, index) => ({
    g: {
      opacity: [0.4],
      transform: [`translate(${scale(data.name) + (scale.bandwidth() / 2)},0)`],
    },
    circle: {
      r: [scale.bandwidth() / 2],
      strokeWidth: [(index + 1) * 2],
      fill: 'green',
    },
    timing: { duration: 1000, ease: easeExpInOut },
  })}

  update={(data, index) => ({
    g: {
      opacity: [0.4],
      transform: [`translate(${scale(data.name) + (scale.bandwidth() / 2)},0)`],
    },
    circle: {
      r: [scale.bandwidth() / 2],
      strokeWidth: [(index + 1) * 2],
      fill: 'blue',
    },
    timing: { duration: 1000, ease: easeExpInOut },
  })}

  leave={(data, index, remove) => ({
    g: {
      opacity: [1e-6],
    },
    circle: {
      fill: 'red',
    },
    timing: { duration: 1000, ease: easeExpInOut },
    events: { end: remove },
  })}

  render={(data, state) => {
    return (
      <g {...state.g}>
        <circle
          stroke="grey"
          cy={dims[1] / 2}
          {...state.circle}
        />
        <text
          x="0"
          y="20"
          fill="#333"
          transform="rotate(-45 5,20)"
        >{`x: ${state.g.transform}`}</text>
        <text
          x="0"
          y="5"
          fill="#333"
          transform="rotate(-45 5,20)"
        >{`name: ${data.name}`}</text>
      </g>
    );
  }}
/>

Why would I need this?

Resonance handles much of the heavy lifting for...

Creating expressive custom transitions easily
Animating anything! 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