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
          }
        }
      })
};