Add Cascading Animations To Characters or Elements JavaScript

CascadeJS makes it easy to add cascading or sequential animations to individual characters or elements, using only vanilla javascript.

animation css property, css animation generator, css animation loop, css animation examples with source code, animation timing function, css animation transition

JQuery & GSAP Fancy Pointer Animations | Cursor & Magnetic

How to make use of it:

Installation:

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

1. Include CascadeJS’s JavaScript and CSS files in the HTML page.

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

2. Select the target item you want to move.

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

3. Move h1 text character by character.

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

4. Possible options for customizing cascading animations:

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

Apply Cascading Animations To Elements, CascadeJS Plugin/Github