— Tap to interact —

Install.


$ yarn add react-flight
              

Compose. Place elements onto frames (two or more) with React or DOM. The rest is magic.

<Flight interactive>
  <Flight.Frame duration={300} source>
    <div className="keyframe">
      <Rect
        name="line1"
        radius={5}
        style={{
          backgroundColor: '#95A2AA',
          left: 120,
          top: 100,
          width: 130,
          height: 10,
        }} />

      <Oval
        name="circ1"
        size={16}
        style={{
          backgroundColor: '#79CD15',
          left: 110,
          top: 130,
        }} />
    </div>
  </Flight.Frame>

  <Flight.Frame duration={300}>
    <div className="keyframe">
      <Rect
        name="line1"
        radius={5}
        style={{
          backgroundColor: '#95A2AA',
          left: 120,
          top: -10,
          width: 130,
          height: 10,
        }} />

      <Oval
        name="circ1"
        size={22}
        style={{
          backgroundColor: '#79CD15',
          left: 50,
          top: 70,
        }} />
    </div>
  </Flight.Frame>
</Flight>

And Run.

Interactive

<Flight interactive>
  <Flight.Frame duration={300}>
    <AppBar />
    ...

Or via Flight Director API

<Rect
  className={name}
  onClick={()=>this.flight.play()}
/>