PushIn.js is a lightweight parallax effect, built with JavaScript, that simulates an interactive dolly-in or push-in animation on a webpage.

Check out the live demo for a working example.

PushIn.js supports all browsers that are ES5-compliant (IE8 and below are not supported).

If you're using npm, you can install the package by running:

npm install --save pushin

Import assets into your javascript (if using Webpack) or directly into your CSS files.

// webpack
import 'pushin/dist/pushin.css';

~ or ~

/* css */
@import 'node_modules/pushin/dist/pushin.css';

Alternatively, you can use the CDN:

<link rel="stylesheet" href="https://unpkg.com/pushin/dist/pushin.min.css" />
<script
  type="text/javascript"
  src="https://unpkg.com/pushin/dist/umd/pushin.min.js"
></script>

At the most basic level, there are a few things you need to set up on your page in order for this to work properly.

Use the following example snippet to create a "scene" for the pushin effect.

Example:

<div class="pushin">
  <div class="pushin-scene">
    <div class="pushin-layer">This is the first layer you'll see.</div>
    <div class="pushin-layer">
      This is a second layer, which will be positioned behind the first one.
    </div>
  </div>
</div>

Each div with the class pushin-layer can hold the content that you want to grow or shrink when scrolling.

Once you have your HTML set up, there are two ways to initialize the effect:

• call new PushIn().start():

import { PushIn } from 'pushin';

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

• call pushInStart() function (which is exported onto the global scope):

import 'pushin';

pushInStart();

To assist in setting up your effect, you can use the debug tool to easily deterimine where you want effects to begin and end when scrolling down your page. To enable this feature, simply pass a config object with debug: true into the helper function.

See a working demo of this tool here: Responsive design

import 'pushin';

// initialize push-in effect
pushInStart({ debug: true });

The PushIn has a destroy() method that may be called to do all cleanups once the view is destroyed. For instance, this is how you would want to do this in React:

import React, { useLayoutEffect, useRef } from 'react';
import { PushIn } from 'pushin';

export default function PushInComponent() {
  const pushInContainer = useRef();

  useLayoutEffect(() => {
    const pushIn = new PushIn(pushInContainer.current);
    pushIn.start();

    return () => pushIn.destroy();
  });

  return (
    <div className="pushin" ref={pushInContainer}>
      <div className="pushin-scene">
        <div className="pushin-layer">This is the first layer you'll see.</div>
        <div className="pushin-layer">
          This is a second layer, which will be positioned behind the first one.
        </div>
      </div>
    </div>
  );
}

The "scene" is the container element for all layers. There are some scene configurations you can customize for your unique project, which will affect all layers.

Refer to docs/html-attributes for a detailed breakdown of available scene configurations.

By default, all layers will push in at once. You can configure each layer to enter and exit the frame at specific times by using the following data parameters:

Refer to docs/html-attributes for a detailed breakdown of available layer configurations.

This effect is heavily reliant on window events, which will not be available in a server-side rendered environment. You will need to bind the window events once the DOM has loaded on the client side. To do this, run the bindEvents() method.

// Start up the effect server-side
const pushIn = new PushIn();
pushIn.start();

//...

// Bind events client-side
pushin.bindEvents();

We've setup separate documentation for contributors: CONTRIBUTING.md

We've setup separate documentation for developers: DEVELOPERS.md