JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<script src="https://raw.github.com/hakimel/stroll.js/master/js/stroll.js"></script>
<link rel="stylesheet" href="https://raw.github.com/hakimel/stroll.js/master/css/stroll.css">
<ul class="blur">
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
</ul>

<ul class="invert">
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
</ul>

<ul class="sepia">
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
</ul>

<ul class="brightness" role="image">
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
  <li>Element</li>
</ul>

CSS

body {
  font: 18px "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    background:#666;
}

ul {
  height: 350px;
  width: 300px;
  background: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
  list-style: none;
  float:left;
  margin:15px 0 0 15px;
}

li {
  height:30px;
  padding:15px;
  margin:2px 0;
  background:#ddd;
}

li:nth-child(odd) {
    background:#aaa;
}

ul[role="image"] li {
  background: url(http://lorempixel.com/300/55/nightlife/2);
  color:#fff;
}

.blur li {
  -webkit-transition: all .35s ease-out .15s;
  -webkit-transform-origin: 50% 50%;
}
.blur li.past {
  -webkit-filter:blur(10px);
  -webkit-transform:translateY(-10px);
}
.blur li.future {
  -webkit-filter:blur(10px);
  -webkit-transform:translateY(10px);
}



.invert li {
  -webkit-transition: all .35s ease-out .15s;
  -webkit-transform-origin: 50% 50%;
}
.invert li.past {
  -webkit-filter: invert(100%);
}
.invert li.future {
  -webkit-filter: invert(100%);
}




.sepia li {
  -webkit-transition: all .35s ease-out .3s;
  -webkit-transform-origin: 50% 50%;
}
.sepia li.past {
  -webkit-filter: sepia(100%);
}
.sepia li.future {
  -webkit-filter: sepia(100%);
}




.brightness li {
  -webkit-transition: all .55s ease-out .25s;
  -webkit-transform-origin: 50% 50%;
     -webkit-filter: brightness(0);
}
.brightness li.past {
  -webkit-filter: brightness(.55);
}
.brightness li.future {
  -webkit-filter: brightness(.55);
}

JavaScript

var list_elements = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen', 'Twenty', 'Twentyone', 'Twentytwo', 'Twentythree', 'Twentyfour', 'Twentyfive', 'Twentysix', 'Twentyseven', 'Twentyeight', 'Twentynine', 'Thirty', 'Thirtyone', 'Thirtytwo', 'Thirtythree', 'Thirtyfour', 'Thirtyfive', 'Thirtysix', 'Thirtyseven', 'Thirtyeight', 'Thirtynine', 'Forty', 'Fortyone', 'Fortytwo', 'Fortythree', 'Fortyfour', 'Fortyfive', 'Fortysix', 'Fortyseven', 'Fortyeight', 'Fortynine', 'Fifty', 'Fiftyone', 'Fiftytwo', 'Fiftythree', 'Fiftyfour', 'Fiftyfive', 'Fiftysix', 'Fiftyseven', 'Fiftyeight', 'Fiftynine', 'Sixty', 'Sixtyone', 'Sixtytwo', 'Sixtythree', 'Sixtyfour', 'Sixtyfive', 'Sixtysix', 'Sixtyseven', 'Sixtyeight', 'Sixtynine', 'Seventy', 'Seventyone', 'Seventytwo', 'Seventythree', 'Seventyfour', 'Seventyfive', 'Seventysix', 'Seventyseven', 'Seventyeight', 'Seventynine', 'Eighty', 'Eightyone', 'Eightytwo', 'Eightythree', 'Eightyfour', 'Eightyfive', 'Eightysix', 'Eightyseven', 'Eightyeight', 'Eightynine', 'Ninety', 'Ninetyone', 'Ninetytwo', 'Ninetythree', 'Ninetyfour', 'Ninetyfive', 'Ninetysix', 'Ninetyseven', 'Ninetyeight', 'Ninetynine'];


stroll.bind('ul');