Class InView

Visibility detection via IntersectionObserver.

  • Monitors elements entering and optionally leaving the viewport
  • Staggered initial delays via maxInitialDelay and element position
  • Direction detection for scroll-aware animations
  • Optional CSS classes via data-in-view-class

Observation lifecycle

The first pass uses zero rootMargin and isInitialStart semantics. After the first enter batch, observers reconnect with rootMargin.

Documentation

Hierarchy (View Summary)

Constructors

Accessors

  • get elements(): Element[]

    Elements currently registered via addElement.

    Returns Element[]

  • get isDestroyed(): boolean

    Indicates whether the instance has been destroyed.

    After destruction, destroy is a no-op.

    Returns boolean

  • get isInitialStart(): boolean

    Whether the first observation pass is still active.

    Becomes false after the first enter batch is processed, before delayed in callbacks fire. Prefer tracking initial vs scroll animations yourself if you rely on staggered maxInitialDelay.

    Returns boolean

  • get isRtl(): boolean

    Whether the document uses direction: rtl.

    Returns boolean

  • get name(): string

    The name of the module, derived from the class name

    Returns string

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

Methods

  • Adds prefixed classes to an element and removes them on destroy.

    Skips classes that are already present on the element.

    Parameters

    • element: Element

      Target DOM element.

    • ...classes: string[]

      Unprefixed class name segments.

    Returns void

  • Builds one or more prefixed class names.

    Parameters

    • ...classes: string[]

      Unprefixed class name segments.

    Returns string

    Space-separated prefixed class string.

  • Disconnects observers and clears the element registry.

    Returns void

  • Set default mutable props

    Returns { __mutableProp: true; enabled: boolean; rootMargin: string }

    • __mutableProp: true
    • enabled: boolean

      Enables or disables the IntersectionObserver instance.

      true
      
    • rootMargin: string

      Specifies the root margin offsets for the IntersectionObserver, allowing fine-tuned visibility detection.

      '0% 0% -5% 0%'
      
  • Get default static props

    Returns {
        __staticProp: true;
        hasOut: boolean;
        maxInitialDelay: number;
        scrollDirection: "horizontal" | "vertical";
    }

    • __staticProp: true
    • hasOut: boolean

      Determines whether elements leaving the viewport should trigger an event.

      true
      
    • maxInitialDelay: number

      Sets the maximum delay (in milliseconds) for initial element visibility. Delay is calculated based on element position.

      1000
      
    • scrollDirection: "horizontal" | "vertical"

      Defines the primary scrolling axis used for delay calculations.

      'vertical'
      
  • Registers an element for visibility observation.

    When data-in-view-class is set, the matching class is toggled on enter/leave.

    Parameters

    • element: Element

    Returns () => void

    A function that calls removeElement for this element.

  • Destroys the instance and runs all registered cleanup actions.

    Safe to call multiple times; subsequent calls are ignored.

    Execution order:

    1. _destroy
    2. all onDestroy callbacks, in registration order
    3. isDestroyed is set to true

    Returns void

  • Registers a function to run when the instance is destroyed.

    If the instance is already destroyed, action runs immediately.

    Parameters

    • action: () => void

      Cleanup function (for example remove listeners or DOM classes).

    Returns void

  • Stops observing an element and clears its in-view flag.

    Parameters

    • element: Element

    Returns void