JSFiddle - React, Tailwind, and code Playground

HTML

<div id="play">
        ready to play, just scroll me a bit
</div>

CSS

body {
	height: 2000px;
}
#play{
    padding-top: 400px;
    
}

JavaScript

$(window).scroll(function() {
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 150;             
	// set to whatever you want it to be

    if(y_scroll_pos > scroll_pos_test) {
       $('#play').text('i am playing animation right now! tataa');
    }
	else
	{
        $('#play').text('I am done!');
	}
});