Animate Text Word By Word – movinwords.js

Preview:

Description:

movinwords is a dependency-free text animation JavaScript library that has the ability to animate text word by word.

How to use 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 kind of animation type you want to use. All available animation types:

• fadeIn
• slideInTop
• slideInBottom
• slideInLeft
• slideInRight
• revealInTop
• revealInBottom

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

4. Customize the animation.

const instance = new movinwords({
      autostart: true,
      intersectionStart: false, // Starts the animation when the element intersects the viewport
      intersectionOptions: { root: null, threshold: 0, rootMargin: '0px' },
      duration: 1000,
      delay: 0,
      offset: 20,
      wordSpacing: null,
});

5. Highlight specific 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 where the autostart is set to false.

instance.start();

Changelog:

01/23/2023

• v1.2.0