Splittext

Text Effects with Greensock library and JQuery

Download .zip Download .tar.gz View on GitHub

Welcome to Split Text Plugin page

This is a page to showcase Split Text and its capabilities

Let's get started:

First of all make sure to inlcude JQuery and GSAP greensock library before the plugin:

http://code.jquery.com/jquery-1.9.1.min.js http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js

Declaration:

To initialize the plugin on an element call

  • Add the 'splitText' class to it
  • Create an object with some properties ex. {'animation':'explode','type':'words'}
  • Call var split = $(".splitText").splitText({...});
  • And to animate the splited text we call split.animate();

Options

The public user-defined options are:

  • type: 'lines', 'words', 'letters'
  • animation: 'explode', '3D', 'slide', 'smoke', 'glowOnHover', 'colorize','typography3D','blackout','scramble'
  • duration: ex. '1.0' in seconds
  • scale: boolean
  • justSplit: boolean (splitText returns only the splited text, no animation)
  • colorize: ex. '#ff0000' when glowOnHover or colorize is selected
  • useCSS: boolean value (to use external css or the build-in one)

Examples

You can view examples of this plugin here

Enjoy!

Version

version is 0.9-beta