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, // gap between each word
      pausableProps: ['opacity','transform'], // CSS properties to be paused when pause is triggered
});

5. Highlight specific words.

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

6. Apply a scramble effect.

const instance = new movinwords({
      scrambleLetters: true,
      scrambleMode: 'unscramble', // or 'scramble'
      scrambleChars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
      scrambleFPS: 16,
});

7. 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',
});

8. Start the text animation manually in case where the autostart is set to false.

instance.start();

9. Pause & resume the animation.

instance.pause();
instance.resume();

Changelog:

v1.6.2 (12/19/2024)

• bugfixes

v1.6.1 (12/18/2024)

• bugfixes

v1.6.0 (12/17/2024)

• added scramble functions

v1.5.0 (01/07/2024)

• added pausableProps option

v1.4.0 (01/03/2024)

• added pausing of animation