# @scandinavia/animate-on-scroll

> React custom hook for detecting if an element got into the view port and animate it.

Latest version **0.0.2** (published 2021-04-20) · 0 weekly downloads

## Install

```sh
npm install @scandinavia/animate-on-scroll
pnpm add @scandinavia/animate-on-scroll
yarn add @scandinavia/animate-on-scroll
bun add @scandinavia/animate-on-scroll
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2021-04-20 |
| First published | 2021-04-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 53.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | scandinavia_tech |

## Links

- npm: https://www.npmjs.com/package/@scandinavia/animate-on-scroll
- npm.io page: https://npm.io/package/@scandinavia/animate-on-scroll

## Recent versions

- 0.0.2 (latest) — 2021-04-20
- 0.0.1 — 2021-04-20

## README

## animate-on-scroll

React custom hook for detecting if an element got into the view port and animate it.

### Example

```
import {useAnimateOnScroll} from "@scandinavia/animate-on-scroll";
import React, {useRef} from "react";
import {useAnimateOnScroll} from "@scandinavia/animate-on-scroll";


export const Card = ({imageUrl, title, content}) => {

    /// First of all you have to create a reference to the element which you want to animate
    const cardRef = useRef(null);
    // useAnimateOnScroll requires two params
    // element: MutableRefObject<any>
    // className: string
    // element initialized with 'opactiy: 0'
    // className will be add to element so you have to consider adding opactiy: 1 to last keyframe
    useAnimateOnScroll(cardRef, "motion-safe:animate-fadeIn");
    return (
        <div className='...'
             ref={cardRef}>
            <div className='...'>
                <img src={imageUrl} width={...} alt="..."/>
                <p className='...'>{title}</p>
                <p className='...'>{content}</p>
            </div>
        </div>
    );
}

 
```

---
_Source: https://npm.io/package/@scandinavia/animate-on-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._