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

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
offset	Number	Optional	The "viewport" is from the top and bottom of the screen Width	150 pixels
duration	Number	Optional	Animation duration in seconds.	1 second
animateOut	Boolean	Optional	Animation out stop	false

License

MIT © shafayatC