static-scroll

Capture scroll and turn into beautiful animations. Create animations based on percentage of scroll. Keyframe by scroll percentage.

Install

npm install --save static-scroll

Demo Usage

Visit homepage to see demo usage Visit mirror if the former site is not available.

Usage

import React, { Component } from 'react'

import StaticScroll from 'static-scroll'
import 'static-scroll/dist/index.css'

const ExampleComponent = {
  const [slide, setSlide] = useState(0)
    
  return (
    <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>)

}

Arguments

| Argument | Type | Explaination | | ---| --- | ---| |numPages| int | defines the number of virtual pages a user have to scroll. defaults to 3 | | updateScroll | (int)=>Unit | call back to handle the scroll percentage value from 0 to 1 | | numSnaps | int or null | if your page has window snapping, you will not be able to scroll down unless you explicilty define the number of snapping points within the virual scroll space. Defaults to null.

License

MIT © Sooryakiran

static-scroll