<StaticScroll updateScroll={(x) => setSlide(x)}>
<div className='h-100 w-100 red d-flex center'>
<div className='white-text'>
<h1 style={{transform: "scale(" + (1 + slide * 5) + ")"}}>
Scroll down to start
</h1>
</div>
</div>
</StaticScroll>
<StaticScroll updateScroll={(x) => setSlide(x)}>
<div className='h-100 w-100 d-flex center blue relative'>
<div style={{
top: "50%",
left: (100 * slide) + "%"
}} className='abs-ball'>
</div>
<div className='white-text'>
<h1>AAAAAnimate anything.
</h1>
</div>
</div>
</StaticScroll>
<StaticScroll numPages={6} updateScroll={(x) => setSlide(x)}>
<div className='h-100 w-100 d-flex center gray relative'>
<div style={{
top: "50%",
left: (100 * slide) + "%"
}} className='abs-ball'>
</div>
<div className='white-text'>
<h1>slower?
</h1>
</div>
</div>
</StaticScroll>
<StaticScroll numPages={1.4} updateScroll={(x) => setSlide(x)}>
<div className='h-100 w-100 d-flex center purple relative'>
<div style={{
top: "50%",
left: (100 * slide) + "%"
}} className='abs-ball'>
</div>
<div className='white-text'>
<h1>slower?
</h1>
</div>
</div>
</StaticScroll>
discretize
<StaticScroll updateScroll={(x) => setSlide(Math.round(x * 2))}>
<div className='h-100 w-100 d-flex center'>
<div className='signalparent'>
<div style={{ opacity: (slide === 0) ? "1" : "0.3" }} className='redsignal'></div>
<div style={{ opacity: (slide === 1) ? "1" : "0.3" }} className='yellowsignal'></div>
<div style={{ opacity: (slide === 2) ? "1" : "0.3" }} className='greensignal'></div>
</div>
<div>
<center>
<h1>
ready, set, scrolllllll
</h1>
<p>
discretize
</p>
</center>
</div>
</div>
</StaticScroll>
yarn add static-scroll
npm install static-scroll