Scroll Reveal

.demo-sr-bg1 > div {
    background-color: rgb(198, 247, 237);
}
.demo-sr-bg1-active > div {
    animation: demo-sr-bg1-anim 1s linear forwards;
}
 
.demo-sr-bg2 > div {
    background-color: rgb(198, 247, 208);
}
.demo-sr-bg2-active > div {
    animation: demo-sr-bg2-anim 1s linear forwards;
}
 
.demo-sr-bg3 > div {
    background-color: rgb(198, 247, 208);
}
.demo-sr-bg3-active > div {
    animation:demo-sr-bg3-anim 1s linear forwards;
}
 
 
@keyframes demo-sr-bg1-anim {
    from {
        background-color: rgb(198, 247, 237);
    }
 
    to {
        background-color: rgb(250, 181, 212);
    }
}
 
@keyframes demo-sr-bg2-anim {
    from {
        background-color: rgb(198, 247, 208);
    }
 
    to {
        background-color: rgb(212, 181, 250);
    }
}
 
@keyframes demo-sr-bg3-anim {
    from {
        border: 5px solid #000;
    }
 
    to {
        border: 15px solid rgb(47, 50, 237)
    }
}

import React from "react";
import ScrollReveal from 'funda-ui/ScrollReveal';
 
 
export default () => {
 
    return (
        <>
          
            <ScrollReveal 
                viewOffset={{
                    y: '-50%',
                    x: '0px'
                }}
                defaultClassName="demo-sr-bg1"
                showClassName="demo-sr-bg1-active"
            >
                <div style={{height: '80vh'}}>Box</div>
            </ScrollReveal>
 
 
 
 
            <ScrollReveal 
                defaultClassName="demo-sr-bg2"
                onChange={(box, visiblePct) => {
                    if (parseFloat(visiblePct) === 100 ) {
                        box.classList.add('demo-sr-bg2-active');
                    }
                    if (parseFloat(visiblePct) === 0 ) {
                        box.classList.remove('demo-sr-bg2-active');
                    }
                }}
                infinite
            >
                <div style={{height: '80vh'}}>Box</div>
            </ScrollReveal>
 
 
 
 
 
            <ScrollReveal 
                showClassName={['shadow-lg', 'demo-sr-bg3', 'demo-sr-bg3-active']}
                onChange={(box, visiblePct) => {
                    console.log(box, visiblePct);
                }}
                onIntersect={(box, isIntersecting) => {
                    console.log(isIntersecting);
                }}
                infinite 
            >
                <div style={{height: '300px'}}>Box</div>
            </ScrollReveal>             
        </>
    );
}