scrollobserve

    1.0.0 • Public • Published
    Scrollobserve

    ScrollObserve is a plugin for animating and applying styles to elements on scroll. It is similar to the intersection observer in implementation with great performance and small filesize at 1.8kb.

    Installation

    NPM,

    npm install scrollobserve

    CDN,

    <script src="https://unpkg.com/scrollobserve/dist/scrollobserve.min.js"></script>

    Basic Usage

    With CDN,

    scrollobserve();

    With NPM,

    import scrollobserve from 'scrollobserve';
    
    scrollobserve();

    When initialized in your JavaScript you can add scrollobserve class to trigger on elements.

    <div class="scrollobserve">Animate me in viewport</div>

    To set behavior for your element when scrolled into and out you could use the default classes so-in and so-out

    .scrollobserve{
      transition: 1s background transform;
      background: rebeccapurple;
    }
    .so-in{
      background: crimson;
    }
    .so-out{
      transform: rotate(-45deg);
    }

    Custom classes can also be used:

    scrollobserve({ inViewClass: 'myInclass', offViewClass: 'myOutClass' }, '.scrolltrigger');

    Options

    reverse

    This determines the behavior when scrolling to bottom and when scrolling back to top of a page. If set to true animations are applied both ways (this is the default), if set to false animations only happen on initial scroll to bottom.

    Example:

    scrollobserve({ reverse: false });

    inViewClass

    Custom class to handle animation in CSS when element intersects viewport

    offViewClass

    Custom class to handle animation in CSS when element is out of viewport. This is usually not needed when reverse is set to true as it goes back to initial state of the scrolltrigger class.

    offset

    Determines the offset of the observed element from viewport intersection before styles and animations are applied. Defaults to 0.

    ignoreTransform

    When set to false it uses getBoundingClientRect() to get precise location of the element to the top of the viewport. When true, it ignore existing transforms like a translate on the element to get the initial position of the element in the window. Defaults to true.

    Methods

    destroy

    Revokes the scrollobserve() function in program execution

    const scrollobserve = scrollobserve();
    
    scrollobserve.destroy();

    observables

    Returns an array of all the elements on the page that are being observed by scrollobserve.

    scrollobserve.observables();

    config

    Returns the current config being used which is an addition of custom options and existing defaults when not overriden.

    scrollobserve.config();

    License

    Licensed under MIT License, Copyright © Joseph Rex

    See LICENSE for more information.

    Install

    npm i scrollobserve

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • josephrexme