maxeth/react-type-animation

Make writing effect word by word

aakrem opened this issue · 2 comments

aakrem commented

Right now the the animation is done letter by letter.
It would be also nice to have the animation display text word by word so it gives a readability closer to the human one.

maxeth commented

Hey,

this would be possible with the custom splitter function introduced in this PR. I'm extremely short on time rn, but I'll do by best to review, test and merge it in the near future.

maxeth commented

You can do this now with npm i react-type-animation@3.2.0. I added a section to the docs but they're not published yet as netlify apparently suspended my account for some reason...

Here's an example:

 <TypeAnimation
        splitter={(str) => str.split(/(?= )/)} // 'abc' => ['a', ' b', ' c']
        sequence={[
          'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
          3000,
          '',
        ]}
        speed={{ type: 'keyStrokeDelayInMs', value: 30 }}
        omitDeletionAnimation={true}
        style={{ fontSize: '1em', display: 'block', minHeight: '200px' }}
        repeat={Infinity}
      />