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.
Read Also: 30 Cool CSS Animations You Have To See
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.
<script> var element = document.getElementsByTagName('h1'); 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.
Read Also: 10 CSS3 Animation Tools You Should Bookmark