Quick Start

Follow these steps to start using PushIn.js in your project.

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

Install pushin with NPM or a CDN

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

npm install --save pushin

Import assets into your javascript (if using Webpack).

import 'pushin/dist/pushin.css';

If not using Webpack, you can import the CSS from node_modules.

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

Alternatively, you can use a CDN:

https://unpkg.com/pushin/dist/pushin.min.css
https://unpkg.com/pushin/dist/umd/pushin.min.js

Insert required HTML structure

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.

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

Initialize the effect

Once you have your HTML set up, you can initialize the effect with pushInStart() which is exported to the global scope.

pushInStart();

If using the global scope is not best for your project, you can alternatively call the start() method:

import { PushIn } from 'pushin';

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