JSFiddle - React, Tailwind, and code Playground

by toby3105

HTML

<div class="content">Scroll</div>
<div class="container">
    <div class="animation">Content goes here...</div>
</div>
<div class="content">test</div>

CSS

.animation.animate {
    animation: pulse 5s infinite;
}
.content {
    height:1000px;
}
@keyframes pulse {
    0% {
        background-color: #001F3F;
    }
    100% {
        background-color: #FF4136;
    }
}

JavaScript

var $window = $(window);
var $elem = $(".animation")

    function isScrolledIntoView($elem, $window) {
        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();

        var elemTop = $elem.offset().top;
        var elemBottom = elemTop + $elem.height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }


$(document).on("scroll", function () {
    if (isScrolledIntoView($elem, $window)) {
        $elem.addClass("animate")
        console.log("now you see me");
    }
});