Constrain PushIn inside elements using the Target option

The original concept of PushIn.js was focused on full-page animations. This approach leans heavily on the window scroll event, and each layer is fixed, meaning it is positioned relative to the viewport instead of being relatively positioned within the page content. This works great for full-page animations but it doesn't work well within the constraints of any sort of page layout.

By providing a "target" element, you can now position the effect within a container on the page. Doing so will attach any scroll events to that target element, and constrain the effect to live within that container.

Usage

You can use this option with the global helper function or the class constructor.

Option 1: Global helper function.

pushInStart({ target: '.container' });

Option 2: Class constructor.

const element = document.querySelector('.pushin');
const pushIn = new PushIn(element, { target: '.container' });
pushIn.start();

Working demo

Below is an example of PushIn.js being applied to a scrollable div element.

This example demonstrates using PushIn.js within a scrollable div.
Optionally attach PushIn to any element.
All event listeners will be added to the target element.