18 kinds of text animation special effects based on anime.js

Brief Tutorial

This is a text animation special effect based on anime.js. These text effects are used to create different text animation effects when switching text through the front and rear navigation buttons.

How to use

The following is a GIF dynamic picture demonstration effect of one of the text animation special effects:

Make this set of text animation special effects The js code looks like the following:

// Initialize
var txt = new TextFx(this.el.querySelector('.title'));
 
// Show letters: 
// txt.show([effect] [,callback]);
// If nothing is passed, then there's no animation.
// ´effect´ can either be one of the predefined effects: ['fx1',...,'fx17'] or 
// an object literal representing both, in and out animations (anime.js based).
 
// Example:
effect = {
  in: {
    duration: 500,
    delay: function(el, index) { 
      return 250+index*40; 
    },
    easing: 'easeOutExpo',
    opacity: 1,
    translateY: ['50%','0%']
  },
  out: {
    duration: 500,
    delay: function(el, index) { 
      return index*40; 
    },
    easing: 'easeOutExpo',
    opacity: 0,
    translateY: '-50%'
  }
}
// ´callback´ is the callback function, after all the letters finished the animation.
 
// Hide letters: 
// txt.hide([effect] [,callback]); (same logic of show)

For more detailed usage of anime.js, you can refer to its documentation.

The original address of this text animation special effect is: http://tympanus.net/codrops/2016/10/18/inspiration-for-letter-effects/

The above are 18 types based on The text animation special effects of anime.js. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!