Public Methods

The following methods are available on a controller instance

createElement()

Creates and returns a new parallax element with provided config including props to be managed by the controller.

const options = {
  el: document.querySelector('.your-element'),
  props: { translateY: [-100, 100] },
};
const element = parallaxController.createElement(options);

getElements()

Returns all the parallax elements in the controller.

const elements = parallaxController.getElements();

updateElementPropsById()

Updates an existing parallax element with new props.

const newProps = { translateY: [-200, 200] };
parallaxController.updateElementPropsById(element.id, newProps);

removeElementById()

Removes an element from the controller by ID (does not call destroy() on the element).

parallaxController.removeElementById(element.id);

resetElementStyles()

Resets parallax styles on a managed element (the Element instance returned from createElement(), not a raw DOM node).

parallaxController.resetElementStyles(element);

updateScrollContainer()

Updates the scroll container of the parallax controller. Rebuilds the internal view, reattaches window listeners, and re-creates the ResizeObserver on the new container (when the controller is not disabled).

const el = document.getElementById('your-scroll-container');
parallaxController.updateScrollContainer(el);

disable()

Disables the controller: removes window listeners and the resize observer, and disables all managed elements.

parallaxController.disable();

disableParallaxController() is an alias for disable().

enable()

Re-enables the controller: restores listeners, the resize observer, view size, and all managed elements.

parallaxController.enable();

enableParallaxController() is an alias for enable().

disableParallaxController()

Alias for disable().

parallaxController.disableParallaxController();

enableParallaxController()

Alias for enable().

parallaxController.enableParallaxController();

update()

Updates all cached attributes on parallax elements.

parallaxController.update();

destroy()

Removes all listeners and resets all styles on managed elements.

parallaxController.destroy();