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

    1.3.0 • Public • Published

    scroll-based HTMLElement property management

    Installation

    npm install data-scroll-animation

    Usage

    data-scroll-parent attribute

    Specifies the start and end point of nested animation

    data-scroll-top

    Defines top offset in px

    data-scroll-bottom

    Defines bottom offset in px

    The animation begins at start - topOffset and ends at end + bottomOffset

    ┌-------------------> topOffset     = frame 0
    |
    |
    ╔═════════════════╗-> start
    ║                 ║
    ║      PARENT     ║
    ║                 ║
    ╚═════════════════╝-> end
    |
    |
    └-------------------> bottomOffset  = frame 1
    

    data-scroll-(property)-(frame)="(value)"

    Sets property of the attribute owner element to value at specified frame

    property have format [property.]*property, so style.width works as well customProperty

    value is linearly interpolated between frames special frames are "before" and "after"

    data-scroll-(method)()

    Calls method every frame with frame number as first and only argument method(frame: number): number

    import * as ScrollAnimation from "data-scroll-animation";
    
    ScrollAnimation.add(document.body); // adds all animation in the document
    ScrollAnimation.add(document.querySelector("#animation")) // adds only the #animation element
    
    ScrollAnimation.remove(document.querySelector("#element")) // removes only the #element element

    Keywords

    none

    Install

    npm i data-scroll-animation

    DownloadsWeekly Downloads

    4

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    1.38 MB

    Total Files

    17

    Last publish

    Collaborators

    • kal-aster