Create Cascading Effects Easily with CascadeJS

Fancy animations are a dime a dozen on a web. They’re removing easier to emanate with tons of implausible animation libraries.

Cascade.js is one some-more library to supplement to a list, and it’s really a singular one. With Cascade, we can pattern tradition animation effects regulating cascading letters in content or cascading elements in a categorical container.

This library has no dependencies; it runs on classical JavaScript. You can implement it by npm, Bower, or by downloading a duplicate right from GitHub.

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

Each Cascade component gets damaged down into apart tools that animate individually by span elements. These are added dynamically, so we don’t need to change anything in your HTML.

But, we will need to set adult a flow() function in your file, after targeting whatever component we wish to animate.

You can indeed use jQuery with this library if we want, however it’s not required. So, if we cite selecting elements with jQuery afterwards feel giveaway to use that instead.

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

  var component = document.getElementsByTagName('h1')[0];
  var cascade = new Cascade(element).flow();

You can pass a flow() component with no parameters, or we can configure them all yourself. It takes eight discretionary parameters for modifying a animation style, timing, duration, and discretionary CSS classes.

CascadeJS has another duty called fragment() that lets we split adult letters (or elements) into apart containers, but animating them. You can use this duty to color and restyle text on a page by targeting any particular minute in a word. Pretty cool, right?

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

CascadeJS pluginCascadeJS plugin

Add Comment