Reveal - On scroll

Kodhus library supports some pretty neat effect to be used in your projects. On scroll Reveal is an effect that let's you create fluid and seamless animations of the elements based on their position and the scroll position of the page.

In simple terms, if you make an element in your page revealable, it initially will be hidden until you scroll the page down after the height of that element is fully in the view.

Usage

In order to make an element revealable, add data-aiv="true" as the element's attribute.

<ul data-aiv="true">
    <li></li> 
    <li></li>
    <li></li>
</ul>
    
 

Attributes you can set on the Revealing elements:

Attribute Value Description
data-avr true / false Enables Reveal effect on the element
data-duration Default: 1000 Duration in milliseconds in which the effect takes place
data-delay Default: 0 Delaying in milliseconds the Reveal effect
data-aiv-children true / false If the Reveal effect should happen for each children individually
data-children-delay Default: 0 if data-aiv-children is set to true, the delay between revealing each children in milliseconds
data-timing-function Default: ease-out You can use default css timing functions or refer to Kodhus easings library.

Tip: For timing functions, you can use Kodhus easings library.

In the following prototype, start scrolling to see the 3 images reveal into their place.