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 effects, is 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, 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. Install and import the PushIn component.

# NPM
$ npm i pushin

// ES module
import { PushIn } from 'pushin';

<!-- OR -->
<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>

7. All possible options & HTML data attributes:

const config = {
      debug: 'false',
      selector: '.pushin',
      target: undefined, // data-pushin-target
      scrollTarget: 'window', // data-pushin-scroll-target
      mode: 'sequential or continuous', // data-pushin-mode
      autoStart: 'scroll, screen-top, or screen-bottom', // data-pushin-auto-start
      length: 1000, // in px, data-pushin-length
      scene: {
        breakpoints: [], // data-pushin-breakpoints
        inpoints: 0; // data-pushin-from
        layerDepth: 1000 // data-pushin-layer-depth
      },
      composition: {
        ratio: [1,2] // data-pushin-ratio
      },
      layers: [
        // Layer 1
        {
          inpoints: undefined; // data-pushin-from
          outpoints: undefined; // data-pushin-to
          speed: 8, // data-pushin-speed
          transitions: false, // data-pushin-transitions
          transitionStart: 200, // data-pushin-transition-start
          transitionEnd: 200, // data-pushin-transition-end
        },
        // Layer 2...
      ],
}
new PushIn(container, config).start(),

Changelog:

v6.0.0 (04/22/2023)

• Automatically append CSS with JavaScript (no longer need to import both).
• Added mode setting for easier parallax design vs sequential animations.
• Added autoStart setting to automatically start the effect based on the scroll position (less dependency on hard inpoints).
• Accessibility improvements.

v5.2.3 (03/18/2023)

• Updated dependencies.

v5.2.2 (12/22/2022)

• Updated dependencies.

v5.2.1 (09/25/2022)

• Updated dependencies.

v5.2.0 (08/18/2022)

• Extend PushInBase abstract class

v5.1.2 (08/11/2022)

• Update package

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…