PushIn API Reference

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>