SplitText Plugin

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-21
Updated:
2016-11-21
Tags:
animation JavaScript libraries

Animating Text and Relative Color Values

Split Text

  • Plug-in, no dependencies 
  • Supports IE8
  • break it into characters, words or lines (even line breaks)
  • option to create auto-incrementing classes, i.e. wraps each letter in a div with an incremented class (​.char1​, ​.char2​, ​.char3​)
   var foo = new SplitText("#bar", {type:"words", 
   //optional
   wordsClass:"word"
 });
Codepen​ 
  TweenLite.set(cont, {
  transformPerspective: 600,
  perspective: 300,
  transformStyle: "preserve-3d",
  autoAlpha: 1
});
(this can also be done in CSS)

Define the type of SplitText you need first (words, chars, etc.)
  var tl = new TimelineLite,
  doSplitText = new SplitText(cont, {
    type: "words, chars"
  }),
  cWords = doSplitText.words,
  cChars = doSplitText.chars,
  numWords = doSplitText.words.length;
Helper function
  function totesRando(max, min) {
  return Math.floor(Math.random() * (1 + max - min) + min);
}
Tween

With  a ​for​ loop.
  tl.add("start");
for (var i = 0; i < numWords; i++) {
  tl.from(cWords[i], 6, {
    z: totesRando(100, 500),
    opacity: 0,
    rotation: totesRando(360, -100),
    ease: Expo.easeOut
  }, "start+=" + Math.random() * 0.3);
}