@scandinavia/animate-on-scroll

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>
    );
}