xpr-split-text

XPR Split Text Module

A module to make text animations in pages easier. Especially useful with headings, but could be applied to not so huge blocks of text too.

How to use:

Require the module. PATH-TO-MODULE depends on your browserify setup.

var XPR_SplitText = require('xpr-split-text');

Important! You need to have GSAP's premium module SplitText.

Initiate:

// make sure you're targeting the actual text element, rather than its parent
var targetEl = document.querySelector('h2');

// from - to are the values for animating the element
var opts = {
  animation: {
    from: { x: 90, opacity: 0 },
    to: { x: 0, opacity: 1 }
  },
  speed: 0.2,
  staggerSpeed: 0.5
};

var splitText = new XPR_SplitText(targetEl, opts);

Methods:

Trigger animation:

splitText.animate(direction, callback (optional))
// direction is 1 to play(), and -1 to reverse() animation

function callback() {
  // do something 
}

// for example:
splitText.animate(1, callback);

Animate on scroll:

var scrollSceneOptions = {
    triggerHook: 0 // optional. default is 0.7
}

splitText.animateOnScroll(scrollSceneOptions);

// for example:
splitText.animateOnScroll({ triggerHook: 0.2 });