PushIn API Reference

For more information, questions, bug reporting or feature requests, checkout the project on GitHub.

PushIn Full HTML Layout

<div class="pushin">
  <div class="pushin-scene">
    <div class="pushin-composition">
      <div class="pushin-layer">layer 1</div>
      <div class="pushin-layer">layer 2</div>
    </div>
  </div>
</div>

JavaScript and HTML configuration

For ultimate flexibility, PushIn can be configured in a couple ways: through the JavaScript API, and/or through data-attributes within the HTML. When using both in combination, the HTML attributes will take precedence.

JavaScript API

Pass in a configuration object to the effect contstructor, whether you are using pushInStart() or new PushIn().

The example below demonstrates how you can configure PushIn using the JavaScript API.

const config = {
  target: document.querySelector('#my-target'),
  scene: {
    breakpoints: [768, 1440, 1920, 2560],
    inpoints: [200, 300],
    ratio: [1, 2],
  },
  layers: [
    // Layer 1
    {
      inpoints: [100, 300],
      outpoints: [300, 600],
      speed: 25
    },
    // Layer 2...
  ],
};

// Using global function
pushInStart(config);

// Using class constructor
new PushIn(config);

HTML attributes

Alternatively, use HTML data-attributes as needed.

NOTE: Any attributes added within the HTML markup will take precedence over configurations in the JavaScript API.

The example below demonstrates how you can use the HTML data-attributes to configure PushIn.

<div class="pushin" data-pushin-target="#my-target">
  <div class="pushin-scene"
      data-pushin-breakpoints="768,1440,1920,2560"
      data-pushin-inpoints="200,300">
    <div class="pushin-composition"
        data-pushin-ratio="1,2">
      <!-- layer 1 -->
      <div class="pushin-layer"
        data-pushin-from="100,300"
        data-pushin-to="300,600"
        data-pushin-speed="25">
        <!-- content -->
      </div>
      <!-- layer 2... -->
    </div>
  </div>
</div>

Modules

Each component of the PushIn plugin has its own set of configurations, separated into modules below.

pushin (top level) | .pushin

Name HTML AttributeType Default Description
debug noneboolean false Enables a tool to display the current scroll position which can help with animation timing.
selector N/Astring '.pushin'

If you are using the global pushInStart() function to create multiple instances of PushIn on one page, and you need to supply specific configurations to each instance, use this option to target a specific element (or multiple elements) as the PushIn container(s).

NOTE: If using the new PushIn() class constructor, you will pass an element in as the first parameter, so this option is unnecessary and will be ignored.

target data-pushin-targetstring undefined JavaScript selector used to attach PushIn to an element on the page.
scrollTarget data-pushin-scroll-targetstring target | windowJavaScript selector used to bind scroll events. If "window" is provided, scroll events will be bound to the Window object, regardless of which element is the target.

scene | .pushin-scene

Name HTML AttributeType Default Description
breakpoints data-pushin-breakpointsstring 0,768,1440,1920Provide a comma-separated list of numbers to configure appropriate responsive design breakpoints.
inpoints data-pushin-fromstring 0Comma-separated list of numbers representing the screen position at which the scene should begin animating.
layerDepth n/anumber 1000When an inpoint or outpoint is not provided for a layer, pushIn will use this number to calculate how long the layer should animate when scrolling.
ratio data-pushin-ratiostring 1,2Set an aspect ratio for your scene to prevent element positions from drifting when screens resize.

composition | .pushin-composition

Name HTML AttributeType Default Description
ratio data-pushin-ratiostring 1,2Set an aspect ratio for your scene to prevent element positions from drifting when screens resize.

layers | .pushin-layer

Name HTML AttributeType Default Description
inpoints data-pushin-fromstring undefinedComma-separated list of numbers representing the screen position at which the layer should begin animating.
outpoints data-pushin-tostring undefinedComma-separated list of numbers representing the screen position at which the layer should stop animating.
speed data-pushin-speednumber 8A number representing how fast or slow the layer should grow or shrink during scroll events.
transitions data-pushin-transitionsboolean true

Whether to fade in or out when the layer is not active. Setting this to false will turn off both start and end transitions.

Note: By default, the first layer does not fade in, and the last layer does not fade out.

transitionStart data-pushin-transition-startnumber 200

Duration of the fade-in effect after the layer becomes active (in pixels).

Note: Use -1 to turn off the start transition only (does not affect end transition).

transitionEnddata-pushin-transition-endnumber 200

Duration of the fade-out effect before the layer becomes inactive (in pixels).

Note: Use -1 to turn off the end transition only (does not affect start transition).