events.js

export default ({ Event, Region, Animate, Button, dispatch }) => ([
  <Event start='00:00:00.000' end='00:00:10.000'>
    <Region id='left' transition='cross-fade' duration={ 2 }>
      <Button test={ dispatch('test') } type='important'>
        Hello John !
      </Button>
    </Region>
    <Region id='bottom' transition='cross-fade' duration={ 2 }>
      <Button test={ dispatch('test') } type='important'>
        Hello John !
      </Button>
    </Region>
  </Event>,
  <Event start='00:00:00.000' end='00:00:10.000' region='left' transition='cross-fade' duration={ 2 }>
    duration => (
      <Region id='left' transition='cross-fade' duration={ 2 }>
        <Animate ease={ ease.quadOut } duration={ duration }>
          <div opacity={ 0 }>
            Hello John !
          </div>
          <div opacity={ 100 }>
            Hello John !
          </div>
        </Animate>
      </Region>
    )
  </Event>,
  <Event start='00:00:00.000' end='00:00:10.000' region='left' transition='cross-fade' duration={ 2 }>
    <Region id='left' transition='cross-fade' duration={ 2 }>
      children => cloneElement(children, { className: 'active' })
    </Region>
  </Event>,
  <Event start='00:00:00.000' end='00:00:10.000' region='left' transition='cross-fade' duration={ 2 } onEvent={ dispatch(someAction()) }/>,
  <Event start='00:00:00.000' end='00:00:10.000' region='left' transition='cross-fade' duration={ 2 }>
    <style dangerouslySetInnerHTML={{__html: `
      div {
        color: red;
      }
    `}}/>
  </Event>
]);