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

License

MIT © shafayatC