Apply Dolly-in Effect To Element On Scroll – pushIn.js

Preview:

Description:

In motion design, dolly-in, also known as push-in, and zoom-in are effects where the camera moves toward the subject. This is often used to draw focus to an area of interest in a scene.

In this article, I will introduce you to a new JS library called pushIn.js to achieve this effect.

pushIn.js is a tiny and high-performance JavaScript library that applies a configurable dolly-in (also called push-in) to elements when scrolling the webpage.

How to use it:

1. Download and include the minified version of the pushIn.js JavaScript library on the page.

<link rel="stylesheet" href="/path/to/pushin.min.css" />
<script src="/path/to/pushin.min.js"></script>

2. Initialize the pushIn.js on the target element.

const container = document.querySelector('.pushin');
new PushIn(container).start();

3. The library allows multiple layers in the same pushIn container. This can be useful in creating a parallax scrolling effect.

<div class="pushin">
  <div class="pushin-scene">
    <div class="pushin-layer">
      Layer 1
    </div>
    <div class="pushin-layer">
      Layer 2
    </div>
    <div class="pushin-layer">
      Layer 3
    </div>
    ... 
  </div>
</div>

4. Determine the position (in pixels) at which the Dolly-in effect starts & ends.

<div class="layer" data-pushin-from="300">
  Layer 1
</div>
<div class="layer" data-pushin-to="600">
  Layer 2
</div>

5. Set the animation speed in milliseconds.

<div class="layer" data-pushin-speed="25">
  Layer 1
</div>
<div class="layer" data-pushin-speed="35">
  Layer 2
</div>

6. Specify custom breakpoints for responsive design.

<div class="pushin-scene" data-pushin-breakpoints="360,480,1200">
  <div class="pushin-layer" data-pushin-from="200,150,100">
    Layer 1
  </div>
</div>

Changelog:

v5.1.1 (07/16/2022)

• Only get target container height on plugin initialization

v5.1.0 (07/11/2022)

• Bind scroll event to window while containing effect with “target”

v5.0.2 (06/29/2022)

• Bugfixes

v5.0.1 (06/20/2022)

• Bugfixes

v5.0.0 (06/18/2022)

• Use Composition to lock the aspect ratio of this effect. Ensures easier positioning of objects in your scene when viewing on different screen sizes
• Constrain the PushIn effect to any container element on the page by providing a selector. This also attaches all event listeners to the provided element.
• Added options to control transitions at the start and end of each layer.
• Bugfixes.

v4.1.3 (06/05/2022)

• Ensure that screen readers advance scrolling experience when reading through content
• Support interactive elements such as links, buttons, etc…