JSFiddle - React, Tailwind, and code Playground

HTML

<div class="group">
    <div data-animation="test">Test</div>
    <p data-animation="test">Test</p>
    <span data-animation="test">Test</span>
</div>
<div class="group">
    <div data-animation="test">Test</div>
    <p data-animation="test">Test</p>
    <span data-animation="test">Test</span>
</div>
<div class="group">
    <div data-animation="test">Test</div>
    <p data-animation="test">Test</p>
    <span data-animation="test">Test</span>
</div>
<div class="group">
    <div data-animation="test">Test</div>
    <p data-animation="test">Test</p>
    <span data-animation="test">Test</span>
</div>
<div class="group">
    <div data-animation="test">Test</div>
    <p data-animation="test">Test</p>
    <span data-animation="test">Test</span>
</div>
<div class="group">
    <div data-animation="test">Test</div>
    <p data-animation="test">Test</p>
    <span data-animation="test">Test</span>
</div>
<div class="group">
    <div data-animation="test">Test</div>
    <p data-animation="test">Test</p>
    <span data-animation="test">Test</span>
</div>
<div class="group">
    <div data-animation="test">Test</div>
    <p data-animation="test">Test</p>
    <span data-animation="test">Test</span>
</div>
<div class="group">
    <div data-animation="test">Test</div>
    <p data-animation="test">Test</p>
    <span data-animation="test">Test</span>
</div>

JavaScript

var groups = $(".group");

$(window).bind("scroll resize orientationchange", function() {
 	showGroup();   
});
               
function showGroup() {
	$(groups).each(function() {
    	var group = $(this),
            elements = $(group).find("[data-animation]");
    });
}