React-scroll-fade-animation NPM

🖱 React Scroll Fade Animation

NPM package for React Scroll Animation !

It is made with Hooks from React-Typescript.

You can use this with several animations by SIMPLE CODES.

💁🏻‍♂️ DEMO

React Scroll Fade Animation Demo

👀 Provide Animations (will be updated for more functions later)

`import ScrollAnimate from 'react-scroll-fade-animation`

Fade Bottom to Top ⬆️
Fade Top to Bottom ⬇️
Fade Left to Right ➡️
Fade Right to Left ⬅️
Fade & Bounce Bottom to Top ⬆️
Fade & Bounce Top to Bottom ⬇️
Fade & Bounce Left to Right ➡️
Fade & Bounce Right to Left ⬅️

`import ObserveAnimate from 'react-scroll-fade-animation/observe`

set offset then you can set displaying path

Other functions are added later!

💡 HOW TO USE

🛠 Install

npm i react-scroll-fade-animation

or

yarn add react-scroll-fade-animation

📚 Import and Use

import React from 'react';
import ScrollAnimate from 'react-scroll-fade-animation';

export default function App() {
  return (
    <div>
      <div
        style={{
          height: '100vh',
          border: '1px solid gray',
        }}
      >
        top blank
      </div>

      {/* This Element shows on Scroll */}
      <ScrollAnimate path={'bottom-bounce'}>{/* Insert Your Item ! */}</ScrollAnimate>

      <div
        style={{
          height: '100vh',
          border: '1px solid gray',
        }}
      >
        bottom blank
      </div>
    </div>
  );
}

This Component appears in middle of Viewport.

But you can custom Duration, Delay and Wrapper Style.

🏭 Props

Import Scroll

import ScrollAnimate from 'react-scroll-fade-animation';

Prop Name	Required	Default Value	Type	Description
path	X	top	string	You can choose `'top','bottom','left','right','top-bounce','bottom-bounce','left-bounce','right-bounce' (low cases)`. It means appearance direction example of 'top', it shows 'bottom' 👉 'top'
delay	X	0	number	Milliseconds
duration	X	1200	number	Milliseconds
offsetHeight	X	0	number	You can adjust the scroll height at which items are displayed. Both negative and positive numbers are possible. If the set value is `negative, it is displayed faster`, and if it is `positive, it is displayed later`.
reAnimate	X	false	boolean	If the setting value is `true`, the item disappears if it moves back to the top of the view. If you scroll down the screen again, the animation that shows the item works `again`. Default(`false`) is not showing animation again.

Import Observe

import ScrollAnimate from 'react-scroll-fade-animation/observe';

Prop Name	Required	Default Value	Type	Description
delay	X	0	number	Milliseconds
duration	X	1200	number	Milliseconds
offset	X	{ x: 0, y: 0, z: 0 }	Object	You can adjust the transition position at which items are displayed.
reAnimate	X	false	boolean	If the setting value is `true`, the item disappears if it moves back to the top of the view. If you scroll down the screen again, the animation that shows the item works `again`. Default(`false`) is not showing animation again.
threshold	X	0.7	number or number[]	It refers to the percentage of the item appearing in the viewport. `0.7` means that 70% of the items wrapped in `scroll component` are displayed in the viewport.

🍔 Example

import React from 'react';
import ScrollAnimationItem from 'react-scroll-fade-animation';

const ScrollItem = ({ title }) => (
  <ScrollAnimationItem
    path={'left'}
    delay={100}
    duration={1500}
    style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    {title}
  </ScrollAnimationItem>
);

export const ScrollWrapper = ({ itemList }) => (
  <>
    {itemList.map(item => (
      <ScrollItem key={title} title={title} />
    ))}
  </>
);

more Examples are in DEMO