CascadeJS
CascadeJS makes it simple to add cascading animations to individual letters or elements, using only vanilla javascript.
Installation
Installation is easy, you have three options:
npm install cascadejsbower install cascadejs
or just download from GitHub. Then:
Quick Start
CascadeJS comes with default settings, so as long as you've included both the JS and CSS files, it will work right out of the box. Here's an example usage:
Ooooohhhh, fancy.
Usage
CascadeJS works by reading a line of text, splitting that text into spans around each character, and then adding animations to each span (by default). The splitting is modeled after charming.js, a vanilla javascript version of Lettering.js. Cascade requires an element be passed in on initialization:
var cascade = element;
Cascade has two methods that can be called:
var cascade = element;cascade;cascade;
Calling fragment()
will split the text without adding the animations, and must be called on an element with only a text node for a child. Calling flow()
will first fragment the text, and then animate all children elements in a cascade. I would suggest calling flow()
whenever possible.
flow()
Usage of Initialize Cascade with an element:
var cascade = element;
Then call flow()
with any or none of the following options:
cascade;
tagName:
- The tag that will wrap each character, ie <span>A</span>
. Defaults to 'span'.
classPrefix:
- The class(es) to be added to the tags, with an increasing number appended at the end, ie <span class="cascade char1">A</span>
. Defaults to 'cascade char'.
effect:
- The class name that adds the animation. In this default, 'fadeUp' uses a keyframe animation to fade in text while utilizing translateY to slide it up. Defaults to 'fadeUp'.
totalTime:
- The amount of time in seconds as a float/integer from the first letter beginning it's animation to the last letter beginning it's animation. Defaults to 0.5
.
duration:
- How long each letter's animation lasts. If you'd rather specify this in your CSS, just leave this option empty. Defaults to null
and doesn't add this styling.
shouldFragment:
- If you've previously called fragment()
on this node, set this option to false otherwise the fragmentation will run again and throw an error. Defaults to true.
shouldAppendTargetClass
- Defaults to true, will append a class to the target element after fragmenting.
targetClass
- The class to be appended to the target element. Defaults to 'cascade-container'. Note: if you've already added the class to the element that you'd like appended, CascadeJS will skip the appending. Example:
<!-- This element will have a class appended to it -->Hello! <!-- This element will NOT have a class appended -->Hello!
Example:
Hello!
Produces:
H e l l o !
Use Animate.css? Try this:
var element = document0;var cascade = element;
You can also call flow()
on an element that already has children nodes of any kind and they'll be animated as well:
Element One Element Two Element Three Element Four
fragment()
Usage of fragment()
will split and wrap your text, but not animate it. Just want to style each letter in an interesting way? Want a vanilla javascript replacement for lettering.js? This is it. fragment()
accepts all the same options as flow()
, but only the following will be applied:
var cascade = element;
You can then call
cascade;
When you're ready for some cool animations.