JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<svg version="1.1" id="Layer_1" class="scatter-wrapper" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
        <g class="st0 animation-block">
            <polygon class="st1 dt1" points="2298.1,112.8 1426.8,638.1 1122.7,255.4 	"/>
            <polygon class="st2 dt2" points="1019.7,-274.8 1122.7,255.4 2298.1,112.8 	"/>
        </g>
        
        <g class="st3 slide-left">
            <polygon class="st2 dt3" points="676.1,674.8 598.8,1319.3 112.1,1028.3 	"/>
            <polygon class="st1 dt4" points="676.1,674.8 855.3,1240.2 598.8,1319.3 	"/>
        </g>
        <g class="st3 slide-left">
            <polygon class="st2 dt5" points="1237.1,125.4 2105.8,1053.9 1055.9,1416.7 	"/>
            <polygon class="st1 dt6" points="1237.1,125.4 2310.7,569.7 2105.8,1053.9 	"/>
        </g>
        <g class="st0 slide-left">
            <polygon class="st1 dt7" points="423.1,596.8 1134.5,656.7 1149.9,999.3 	"/>
            <polygon class="st2 dt8" points="990.3,1343.2 1149.9,999.3 423.1,596.8 	"/>
        </g>
        <g class="slide-left" >
            <path class="st1" d="M1533.1,921.9c1.6-9.3,39-466.8,39-466.8l155.1,164.2L1533.1,921.9z"/>
            <polygon class="st2 dt9" points="1533.1,921.9 1919.5,738.5 1727.3,619.3 	"/>
            <polygon class="st4 dt10" points="1572.2,455.1 1765.2,574.7 1919.5,738.5 1727.3,619.3 	"/>
        </g>
        <g class="st3 slide-left">
        <polygon class="st2 dt11" points="1052.1,-84.2 974.8,560.3 488.1,269.3 	"/>
        <polygon class="st1 dt12" points="1052.1,-84.2 1231.3,481.2 974.8,560.3 	"/>
        </g>
        <g>
        <path class="st1 slide-left" d="M906.6,698.2c0,0-236.3-449.3-254-427C635,293.5,333.8,817.4,333.8,817.4L906.6,698.2z"/>
        <polygon class="st2 dt13" points="351.2,133.1 333.8,817.4 652.6,271.2 	"/>
        </g>
        <g>
        <path class="st1...

JavaScript

var $animation_elements = $('svg .animation-block');
    var $window = $(window);

    function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);
        $.each($animation_elements, function() {
            var $element = $(this);
            var element_height = $element.outerHeight();
            var element_top_position = $element.offset().top;
            var element_bottom_position = (element_top_position + element_height);
        
            if ((element_bottom_position >= window_top_position) &&
                (element_top_position <= window_bottom_position)) {
            $element.addClass('in-view');
            }
        });
    }

    $window.on('scroll resize', check_if_in_view);
    $window.trigger('scroll');