Apply Cascading Animations To Elements With JavaScript – CascadeJS

Preview:

Description:

CascadeJS is a JavaScript animation library that allows you to apply CSS3 based cascading animations to any elements. You can use this library to animate DOM elements letter by letter or element by element. Currently comes with 2 animation types: fadeUp and fadeDown. You can also integrate it with any CSS animation libraries such as Animate.css.

Installation:

# NPM
$ npm install cascadejs
# Bower
$ bower install cascadejs

Basic usage:

Include the CascadeJS’ JavaScript and CSS files on the html page.

<link href="dist/cascade.css" rel="stylesheet">
<script src="dist/cascade.js"></script>

Specify the target element you want to animate.

var element = document.getElementsByTagName('h1');

Animate the h1’s text letter by letter.

var cascade = new Cascade(element).flow();

Possible options to customize the cascading animation:

var cascade = new Cascade(element).flow({
    // tag name to hold the elements
    tagName: 'span',
    // default CSS class prefixes
    // great for custom CSS3 animations
    classPrefix: 'cascade char',
    // 'fadeUp' or 'fadeDown'
    effect: 'fadeUp',
    // animation time
    totalTime: 0.5,
    // animation duration
    duration: 1,
    // 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.
    shouldFragment: true,
    // will append a class to the target element after fragmenting.
    shouldAppendTargetClass: true,
    // target class
    targetClass: 'cascade-container'
    
});