A JavaScript Library To Animate Text On Scroll – Letterdance.js

Preview:

Description:

Letterdance.js is a JavaScript library that transition between a set of text by shuffling the letters on page scroll.

How to use it:

Link to the Letterdance.js like this:

<script src="letterdance.js"></script>

Add a group of text into the container with the CSS class letterdance.

<div class="letterdance" style="height: 100%; width: 100%">
  <div><h1>What if Kanye made a song, about Kanye?</h1></div>
  <div><h1>Called "I Miss The Old Kanye," man that would be so Kanye</h1></div>
  <div><h1>That's all it was Kanye, we still love Kanye</h1></div>
  <div><h1>And I love you like Kanye loves Kanye</h1></div>
</div>

That’s it. You can override the defaults like this:

var FRACTION_OF_SCROLL_THAT_IS_PAGE_TRANSITION = 0.2;
var FIXED_TRANSITION_TIME = 0.33;
var ORIGINAL_CONTENT_OPACITY = 0;
var TEXT_NODE = 3;
var ELEMENT_NODE = 1;