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.

<script src="pushin.min.js"></script>

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

pushInStart( '.push-in' );

<div class="push-in">
  <div class="layer">
    Content Here
  </div>
</div>

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

<div class="push-in">
  <div class="layer">
    Layer 1
  </div>
  <div class="layer">
    Layer 2
  </div>
  ... more layers ...
</div>

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

<div class="push-in">
  <div class="layer" data-pushin-from="300">
    Layer 1
  </div>
  <div class="layer" data-pushin-to="600">
    Layer 2
  </div>
  ... more layers ...
</div>

5. Set the animation speed in milliseconds.

<div class="push-in">
  <div class="layer" data-pushin-speed="25">
    Layer 1
  </div>
  <div class="layer" data-pushin-speed="35">
    Layer 2
  </div>
  ... more layers ...
</div>

Changelog:

v2.1.0 (01/20/2022)

• Update