JSFiddle - React, Tailwind, and code Playground

by Alexandre

HTML

<script src="https://cdn.jsdelivr.net/jquery.waypoints/2.0.4/waypoints.js"></script>
Open your javascript console and scroll.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Keep scrolling!
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="1" class="dynamic">Hello,</div>
<div id="2" class="dynamic">World!</div>

CSS

.dynamic {
    /**display: none;**/
}

JavaScript

console.log("Page loaded at "+new Date())
var waypoints = $('.dynamic').waypoint({
    handler: function (direction) {
        console.log("Hiding element(s) at "+new Date());
        $(this).hide(700);
    },
    offset: 'bottom-in-view'
});