JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<script src="http://alpaca.org.ua/AnimOnScroll.js"></script>
<script src="http://alpaca.org.ua/imagesloaded.js"></script>
<ul id='effect'>
    <li>qwe</li>
    <li>qwe</li>
        <li>qwe</li>
    <li>qwe</li>
        <li>qwe</li>
    <li>qwe</li>
        <li>qwe</li>
    <li>qwe</li>
        <li>qwe</li>
    <li>qwe</li>
        <li>qwe</li>
    <li>qwe</li>
        <li>qwe</li>
    <li>qwe</li>
        <li>qwe</li>
    <li>qwe</li>
        <li>qwe</li>
    <li>qwe</li>
</ul>

CSS

#effect li {
    background: olive;
    list-style: none;
    width: 50px;
    height: 70px;
    margin-top: 10px;
-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
transform: translateY(200px);
-webkit-animation: moveUp 0.65s ease forwards;
-moz-animation: moveUp 0.65s ease forwards;
animation: moveUp 0.65s ease forwards;
    	opacity: 0;
}

@-webkit-keyframes moveUp {
to { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes moveUp {
to { -moz-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
to { transform: translateY(0); opacity: 1; }
}

JavaScript

new AnimOnScroll( document.getElementById( 'effect' ), {
        minDuration : 0.4,
        maxDuration : 0.7,
        viewportFactor : 0.2
 } );