JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<svg version="1.1" id="split-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 451 451" style="enable-background:new 0 0 451 451;" xml:space="preserve">
<path class="st0" d="M311.6,211.5c-0.7-4.2-1.7-8.4-2.9-12.4l133.8-34.1c1.4,4,2.8,10.4,3.5,14.6L311.6,211.5z"/>
<path class="st0" d="M299.2,178.8c2.4,3.7,4.5,7.7,6.2,11.7l121.4-66.1c-1.8-4.3-5.2-10.5-7.9-14.4L299.2,178.8z"/>
<path class="st0" d="M394.6,76.6c-3.6-4.4-9.2-10.5-13.8-14.3l-98.7,96.8c4.4,3.7,8.5,7.9,12.1,12.5L394.6,76.6z"/>
<path class="st0" d="M261.6,146.2c5.9,2.6,11.4,5.9,16.5,9.7l71.5-118.5c-5.2-3.7-12.6-8.3-18.5-11L261.6,146.2z"/>
<path class="st0" d="M239,139.5c6.7,1,13.2,2.8,19.3,5.3l37.5-133.3c-6.2-2.4-14.8-4.8-21.5-5.9L239,139.5z"/>
<path class="st0" d="M237.8,0.6C234,0.2,229.3,0,225.6,0c-3.3,0-8,0.2-11.2,0.5l1.2,138.7c3.4-0.4,6.9-0.6,10.4-0.6
	c3.5,0,7,0.2,10.5,0.6L237.8,0.6z"/>
<path class="st0" d="M214.2,139.4L179.1,5c-7.5,1.2-16.8,3.7-23.7,6.4l34.8,125.8l-0.2,0.1l2.3,8.2
	C199.1,142.5,206.5,140.4,214.2,139.4z"/>
<path class="st0" d="M192.2,145.4l-2.3-8.2l-1.7,0.7L123.6,24.6c-7.7,3.4-16.4,8.6-23,13.4l63.9,105.6l0,0l8.1,13.4
	C178.6,152.4,185.1,148.5,192.2,145.4z"/>
<path class="st0" d="M172.6,157.1l-8.1-13.4l-1.5,1.2L75.3,57.7C68.8,63,61.2,70.5,56.1,77.1l84.7,80.7l-0.3,0.3l16,15.4
	C161.2,167.3,166.6,161.8,172.6,157.1z"/>
<path class="st0" d="M156.6,173.5l-16-15.4l-1,1.2L38,100.7c-5.5,7.3-11,17.2-14.7,25.4l97,53.4l-0.1,0.3l25.1,13.9
	C148.2,186.4,152,179.6,156.6,173.5z"/>
<path class="st0" d="M145.4,193.7l-25.1-13.9l-0.6,1.6l-107-29.7c-3.5,9-6.6,20.6-8.1,30.2l101.8,24.9l0,0.1l33.7,8.3
	C140.9,207.6,142.7,200.5,145.4,193.7z"/>
<path class="st0" d="M139.5,225.2c0-3.4,0.2-6.8,0.6-10.1l-33.7-8.3l-0.3,1.9L0.9,208.8C0.6,213.9,0,220.3,0,225.4
	c0,5,0.6,11.1,0.9,16l98.9-0.8l0,0.3l41-0.2C139.9,235.6,139.5,230.5,139.5,225.2z"/>
<path class="st0"...

CSS

body { height: 5000px; background: #262c43;}
#split-logo {
  max-width: 90vw;
  max-height: 90vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.st0 { 
  fill: #fff;
  stroke: #fff;
  stroke-width: 1px;
  visibility: hidden;
}
.show { visibility: visible; }
#start { position: absolute; top: 0px; }
#end { position: absolute; top: 5000px; }

Babel + JSX

Array.from = (x)=>[].slice.call(x);

const getY = (id) =>
	  document.getElementById(id)
    .getBoundingClientRect()
    .top + window.scrollY;
    
const viewportHeight = document.documentElement.clientHeight;

const paths = [...document.querySelectorAll('#split-logo path')];

const logoController = new ScrollMagic.Controller();

new ScrollMagic.Scene({
    offset: () => 0,
    duration: () => 10000
})
.on('progress', ({ progress }) => {
    console.log(progress);
    const segmentCount = paths.length + 1;
    const currentSegment = Math.floor(progress * segmentCount) - 1;
    paths.forEach((segment, i) => {
        if (i < currentSegment) {
            segment.setAttribute('class', 'st0 show');
        } else {
            segment.setAttribute('class', 'st0');
        }
    });
})
.addTo(logoController);