InViewStateMgr

import InviewStateMgr from '@bbc/front-end-kit/js/managers/InViewStateMgr';

Uses GSAP ScrollTrigger to scan [data-iv] elements within a parent and add a --viewed class (or a custom class via [data-iv-class]) when they scroll into the viewport. Processed elements receive --iv-ready to prevent double-initialisation on refresh().

Extends EventDispatcher.

Getting started

Minimal setup

<div data-iv>Animates in when scrolled into view</div>

import InviewStateMgr from '@bbc/front-end-kit/js/managers/InViewStateMgr';

const ivMgr = new InviewStateMgr();

Custom trigger position

<div data-iv="top 80%">Triggers earlier</div>

Custom class

<div data-iv data-iv-class="--visible">Adds --visible instead of --viewed</div>

Targeting other elements

The data-iv value accepts a pipe-separated string:

<!-- Optional: custom trigger position | selector -->
<div data-iv="top 80% | .my-target">Triggers .my-target</div>

Scope keywords for the selector:

• $body — scopes the selector to document.body
• $target / $trigger — scopes the selector to the element itself

API

constructor(args = {})

Initialises the manager and immediately calls refresh().

Parameters

• $parent (Element, default document.body): The root element to scan for [data-iv] elements.
• triggerPosition (string, default 'top 65%'): The default GSAP ScrollTrigger start value. Can be overridden per element via the data-iv attribute value.
• _viewedClass (string, default 'viewed'): The viewed class modifier. Note: the leading underscore on this arg name is as it appears in the source.

Methods

refresh()

Scans $parent for [data-iv] elements that have not yet been processed (no --iv-ready class) and creates a ScrollTrigger for each. Each trigger fires once and is not reversible.

destroy()

Calls super.destroy() (from EventDispatcher). Individual ScrollTrigger instances are stored in _triggers but not explicitly killed in the current source — call ScrollTrigger.getAll().forEach(t => t.kill()) if a full cleanup is needed.

CSS classes

External dependencies

• GSAP ScrollTrigger: Registered automatically on import (gsap.registerPlugin(ScrollTrigger)).