Create Cascading Effects Easily with CascadeJS

By Jake Rocheleau. in Toolkit. Updated on June 22, 2017.

Fancy animations are a dime a dozen on the web. They’re getting easier to create with tons of incredible animation libraries.

Cascade.js is one more library to add to the list, and it’s definitely a unique one. With Cascade, you can design custom animation effects using cascading letters in text or cascading elements in a main container.

This library has no dependencies; it runs on classic JavaScript. You can install it through npm, Bower, or by downloading a copy right from GitHub.

To get CascadeJS working, you’ll need two files: a CSS file and a JavaScript file. They both come packaged with minified versions to save you a few KBs on page size.

Each Cascade element gets broken down into separate parts which animate individually through <span> elements. These are added dynamically, so you don’t need to change anything in your HTML.

But, you will need to set up the flow() function in your file, after targeting whatever element you want to animate.

You can actually use jQuery with this library if you want, however it’s not required. So, if you prefer selecting elements with jQuery then feel free to use that instead.

Here’s a snippet of vanilla JavaScript from the main site’s demo:

<script>
  var element = document.getElementsByTagName('h1')[0];
  var cascade = new Cascade(element).flow();
</script>

You can pass the flow() element with no parameters, or you can configure them all yourself. It takes eight optional parameters for editing the animation style, timing, duration, and optional CSS classes.

CascadeJS has another function called fragment() which lets you split up letters (or elements) into separate containers, without animating them. You can use this function to color and restyle text on the page by targeting each individual letter in a word. Pretty cool, right?

All code samples are openly available on the main library page, so you can copy/paste and tinker on your own. But, you’ll also find the documentation on the GitHub page if you’re looking for a clearer way to get started.