Author: | revueltai |
---|---|
Views Total: | 1,738 views |
Official Page: | Go to website |
Last Update: | January 23, 2023 |
License: | MIT |
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