React-easy-scroll-effect NPM

react-easy-scroll-effect

Easy Scroll Element Effect Component for ReactJS

Just Two Elements will be used. (for element scroll effect)
Support GPU Render, by default.
Support SSR. ( server-side-rendering )

Live demo

demo gif

live demo link

Install

// npm
npm install --save react-easy-scroll-effect

// yarn
yarn add react-easy-scroll-effect

Usage

example 1

import { ScrollEffect } from 'react-easy-scroll-effect'
import 'react-easy-scroll-effect/dist/index.css'

const App = () => {
  return (
    <div>
    
        <ScrollEffect>
          <h1> some text here</h1>
        </ScrollEffect>

    </div>
  );
}

example 2 (with options)

import { ScrollEffect } from 'react-easy-scroll-effect'
import 'react-easy-scroll-effect/dist/index.css'

const App = () => {
  return (
    <div>

        <ScrollEffect offset={200} duration={2} animateOut={true}>
          <h1> some text here</h1>
        </ScrollEffect>

    </div>
  );
}

If You want to see more detail source,

example/App.js

Props

Name	Type	Required	Description	Default
id	`Number or String`	`Optional`	In NextJs : Must be use 'id' otherwise can not use "ScrollEffect" multiple time
offset	`Number`	`Optional`	The "viewport" is from the top and bottom of the screen Width	0 pixels
duration	`Number`	`Optional`	Animation duration in seconds.	1 second
animateOut	`Boolean`	`Optional`	Animation out stop	false