SplitWords

<Controls playState={PlayState.stop}>
  <Tween from={{ x: '200px' }} stagger={0.5} ease="elastic.out(0.1, 0.1)">
    <SplitWords
      wrapper={<div style={{ display: 'inline-block', fontSize: '40px' }} />}
    >
      This text gets splitted by words.
    </SplitWords>
  </Tween>
</Controls>

<Controls playState={PlayState.stop}>
  <Timeline
    target={
      <Fragment>
        <SplitWords
          wrapper={
            <div style={{ display: 'inline-block', fontSize: '40px' }} />
          }
        >
          This text gets splitted by words.
        </SplitWords>
      </Fragment>
    }
  >
    <Tween to={{ y: '-20px' }} position={0.5} duration={0.1} target={1} />
    <Tween to={{ y: '-20px' }} position="+=0.5" duration={0.1} target={3} />
    <Tween to={{ y: '-20px' }} position="+=0.5" duration={0.1} target={5} />
  </Timeline>
</Controls>

<Controls playState={PlayState.stop}>
  <Tween
    from={{ x: '200px', rotation: 360 }}
    stagger={0.2}
    ease="elastic.out(0.1, 0.1)"
  >
    <SplitWords
      delimiter="|"
      wrapper={<div style={{ display: 'inline-block', fontSize: '40px' }} />}
    >
      This|text|gets|splitted|by|custom|delimiter
    </SplitWords>
  </Tween>
</Controls>