Extension For Animate Text Sentences And Words | movinwords.js

movinwords is a JavaScript animation library that is devoid of dependency and has the ability to animate text word by phrase/word.

animate text word by word after effects, text animation letter by letter, how to animate text in word, how to add animation effects to text

How to make use of it:

1. Install and import the movinwords.

$ 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">
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.


Animate Text Word By Word, movinwords Plugin/Github


See Demo And Download

Official Website(revueltai): Click Here

This superior jQuery/javascript plugin is developed by revueltai. For extra Advanced Usages, please go to the official website.

Leave a Comment