React Magician

Declaratively animate React components. React Magician aims to be simple to use, yet flexible and powerful.

Example:

this.animations = {
      fooBarAnimation: Animation.create({
        '0ms': { // time based
          blockA: {
            left: 0,
            position: 'absolute',
            top: 0,
            width: 200,
            transform: 'rotate(0deg)'
          },
          blockB: { // yes, we support multiple elements
            left: 0
          }
        },
        'a: ?ms': { // we don't know how long this lasts, the spring easing determines when it ends.
                    // a: indicates a label with the name a
          blockA: {
            left: 100,
            transform: 'rotate(90deg)', // we automatically make this work for you
            easing: EasingTypes.spring({
              mass: 1,
              spring: 30,
              damping: 4
            })
          }
        },
        '400ms': { // here we animate the top based on time, with the default linear easing
          blockA: {
            top: 300
          }
        },
        'b: ?ms': {
          blockB: {
            left: 1000,
            easing: EasingTypes.spring({
              mass: 1,
              spring: 50,
              damping: 3
            })
          }
        },
        'a + 100ms': { // 100ms after animation block with label a is done
          blockA: {
            left: 20
          }
        },
        'a + 2000ms': {
          blockA: {
            left: 100
          }
        },
        'a + b + 200ms': { // 200ms after both a and b are done
          blockB: {
            left: 100
          }
        }
      })
};

Future plans

The current focus is on the API, and making it simple to orchestrate complex animations based on time, touch or mouse. For now we're mostly focusing on making sure the timing API provides everything that's needed.

Performance:

• re-use objects

LICENSE

MIT