Extension For Animate Text Sentences And Words | movinwords.js

How to make use of it:

1. Install and import the movinwords.

# NPM
$ npm i movinwords

// ES
import 'movinwords/dist/movinwords.min.css';
import movinwords from 'movinwords';

// Browser
<link rel="stylesheet" href="dist/movinwords.min.css" />
<script src="dist/movinwords.min.js"></script>

2. Animate your text word by word.

<div class="demo">
  TEXT TO ANIMATE
</div>

const instance = new movinwords({
      el: '.demo'
});

3. Determine what sort of animation sort you need to use.

const instance = new movinwords({
      el: '.demo',
      transition: 'fadeIn'
});

4. Customize the animation.

const instance = new movinwords({
      autostart: true,
      duration: 1000,
      delay: 0,
      offset: 20,
      wordSpacing: null,
});

5. Highlight particular words.

const instance = new movinwords({
      highlight: {
        classname: 'highlight',
        tag: 'strong',
        words: [] // add your words here
      },
});

6. Event handlers.

const instance = new movinwords({
      events: {
        start: (options) => {
          console.log('Started!', options)
        },
        wordTransitionStart: (options) => {
          console.log('Word Transition Started', options)
        },
        wordTransitionEnd: (options) => {
          console.log('Word Transition Ended', options)
        },
        end: (options) => {
          console.log('Ended!', options)
        }
      },
      eventsTransitionProperty: 'opacity',
});

7. Start the text animation manually in case the place autostart is ready to false.

instance.start();

Animate Text Word By Word, movinwords Plugin/Github

See Demo And Download