PushIn.js

PushIn API Reference

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

PushIn HTML Structure

For most applications, the following minimal HTML structure can be used.

<div class="pushin">
  <div class="pushin-layer">layer 1</div>
  <div class="pushin-layer">layer 2</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, data attributes will take precedence.

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

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

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

// Method 1: Using global function
pushInStart(config);

// Method 2: Using class constructor
new PushIn(config);

Settings & Configurations

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

pushin (top level) | <div class="pushin">

NameHTML AttributeTypeDescription
debugnoneboolean

Enables a tool to display the current scroll position which can help with animation timing.

Default: false

selectornonestring

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.

Default: '.pushin'

targetdata-pushin-targetstring

JavaScript selector used to attach PushIn to an element on the page.

Default: undefined

scrollTargetdata-pushin-scroll-targetstring

JavaScript selector used to bind scroll events. Use the string "window" to bind scroll events to the Window object, regardless of which element is the target.

Default: 'window'

modedata-pushin-modestring

Specify how PushIn layers should be displayed.

Options:

  • continuous - display all layers continuously throughout the animation.
  • sequential - display layers in a sequence, one after another.

Default: 'sequential'

autoStartdata-pushin-auto-startstring

Automatically begin animating the effect based on where the PushIn container is while scrolling.

Options:

  • scroll - begin animating immediately when the user begins scrolling.
  • screen-top - begin animating when the top of the PushIn container aligns with the top of the browser.
  • screen-bottom - begin animating when the top of the PushIn container aligns with the bottom of the browser.

Default: 'scroll'

lengthdata-pushin-lengthnumber

Alias for layerDepth. When an inpoint and outpoint are not provided for a layer, PushIn will use this number to calculate how long the layer should animate when scrolling. If used in combination with 'continuous' mode, it can indicate how long the effect should scroll on the page.

Default: 1000

scene | <div class="pushin-scene">

NameHTML AttributeTypeDescription
breakpointsdata-pushin-breakpointsarray

Provide an array of numbers to configure appropriate responsive design breakpoints. If using the data attribute, use a comma-separated string.

Default: [0,768,1440,1920]

inpointsdata-pushin-fromnumber|array

A single number, or an array of numbers representing the screen position at which the scene should begin animating.

Providing an array of numbers will set a different inpoint for each corresponding breakpoint, used for responsive design.

If using the data attribute, provide a comma-separated string to represent an array.

Default: 0

layerDepthdata-pushin-layer-depthnumber

When an inpoint and outpoint are not provided for a layer, PushIn will use this number to calculate how long the layer should animate when scrolling.

Default: 1000

composition | <div class="pushin-composition">

NameHTML AttributeTypeDescription
ratiodata-pushin-ratioarray

Caution: Use sparingly! Changing this setting is not recommended. Set an aspect ratio for your scene to determine the width and height of each layer.

The aspect ratio is represented as an array. Example: a 2:1 ratio can be represented as array: [2,1].

If using the data attribute, pass in a comma-separated string. Example: '2,1'.

Default: 1,2

layers | <div class="pushin-layer">

NameHTML AttributeTypeDescription
inpointsdata-pushin-fromnumber|array

A single number, or an array of numbers representing the screen position at which the layer should start animating.

Providing an array of numbers will set a different inpoint for each corresponding breakpoint, used for responsive design.

If using the data attribute, provide a comma-separated string to represent an array.

Default: undefined

outpointsdata-pushin-tostring

A single number, or an array of numbers representing the screen position at which the layer should stop animating.

Providing an array of numbers will set a different outpoint for each corresponding breakpoint, used for responsive design.

If using the data attribute, provide a comma-separated string to represent an array.

Default: undefined

speeddata-pushin-speednumber

A number representing how fast or slow the layer should grow or shrink during scroll events.

Default: 8

transitionsdata-pushin-transitionsboolean

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.

Default: false for first and last layers, true for all layers in between

transitionStartdata-pushin-transition-startnumber

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).

Default: 200

transitionEnddata-pushin-transition-endnumber

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).

Default: 200

View on GitHub