Scroll down to start

<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>

AAAAAnimate anything.

<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>

slower?

<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>

faster?

<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>

ready, set, scrolllllll

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>

or show video frames


yarn add static-scroll

npm install static-scroll