Apply Cascading Animations To Elements With JavaScript – CascadeJS

Category: Animation , Javascript | March 18, 2017
Author: bartboy011
Views Total: 239
Official Page: Go to website
Last Update: March 18, 2017
License: MIT

Preview:

Apply Cascading Animations To Elements With JavaScript – CascadeJS

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'
    
});