Neverending Package Mountain

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published


    Component that wraps other content and runs an animation on the content when it becomes visible on the page.

    npm install @stnew/animation-wrapper
    import { AnimationWrapper } from '@stnew/animation-wrapper';
    const AnimatedComponent = () => (
        <p>Hello world!</p>
    Props Type Default Desc
    children ReacChildren undefined Element(s) to be animated. *Required
    root Element 0px root option passed to IntersectionObserver.
    rootMargin string 0px rootMargin option passed to IntersectionObserver.
    threshold number 0 threshold option passed to IntersectionObserver.
    generalClass string animation css class to be applied at all times to the wrapper component.
    finalClass string animation-to css class to be applied to the wrapper component once the content comes into view.
    initialClass string animation-from css class to be applied to the wrapper component before the content comes into view.
    delay number 0 time (in milliseconds) between when the element comes into view and when the finalClass gets applied.
    heightDelayMult number 1 if multiple AnimationWrapper components are in view when the page loads, their animations are delayed by an amount relative to how far they are from the top of the page. heightDelayMult can increase or increase this offset. A value of 0 will remove the delay.




    npm i @stnew/animation-wrapper

    DownloadsWeekly Downloads






    Unpacked Size

    12.3 kB

    Total Files


    Last publish


    • returningsam
    • cabe
    • ryanhefner
    • artofrawr