Animate

A component of N=1. Source code is available at GitHub.

Animate will animate its children using a generator hook. Children can be any react component.

The following example is a storybook story.

 <Animate
    name={"storybook.animation"}
    g={g}

    active={ boolean('active', true)}
    overflowX={'hidden'}
    overflowY={'hidden'}
    componentsSize={{width: 70, height: 50}}
  >
    <Panel
      key={'layout#1'}
      style={{
        backgroundColor: 'coral',
        borderStyle: 'solid',
        borderColor: 'black',
        borderWidth: 1
      }}
    >
       {(args: IMetaDataArgs) => {
            return (
              <div style={{padding: 5}}>
              <span>x: {args.block.x.toFixed(0)}</span> <br/>
              <span>y: {args.block.y.toFixed(0)}</span>
              </div>
            )
          }}
    </Panel>
  </Animate>

To see it in action run 'yarn storybook' on your clone.