JavaScript library For CSS3 Scroll Animations - kissui.scrollanim

Demo Download

Author:	usablica
Views Total:	735 views
Official Page:	Go to website
Last Update:	August 10, 2016
License:	MIT

Preview:

JavaScript library For CSS3 Scroll Animations – kissui.scrollanim

Description:

kissui.scrollanim is a lightweight and zero-dependency JavaScript library that allows you to add 75+ CSS3 powered animations to a certain element depending on its current position relative to the browser window when scrolling.

How to use it:

Add the scrollanim.min.css and scrollanim.min.js into your webpage.

<link rel="stylesheet" href="build/scrollanim.min.css">
<script src='build/scrollanim.js'></script>

Use the ‘data-kui-anim’ attribute to specify the animation type when the element is scrolled into view.

<div data-kui-anim="fadeIn">Show this with fade-in</div>

Or use JavaScript as follow:

kissuiScrollAnim.add(element, {
  'in': 'fadeIn'
});

Determine at which position should trigger the animation.

/*
in - in the viewport
out - ot in the viewport
middle - center aligned element (vertically)
center - center aligned element (horizontally)
top - at the top of the page
bottom - at the bottom of the page
left - at the left side of the page
right - at the right side of the page
*/
kissuiScrollAnim.add(element, {
  'center middle': 'fadeIn'
});

Animations supported: