version

Installation

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

Alternatively, you can use a CDN:

https://cdn.jsdelivr.net/npm/pushin@6/dist/umd/pushin.min.js

Note: It is best practice to include the version in your CDN URL (this comes after the @ symbol in the URL). This will avoid sudden changes in the event that major updates are rolled out.

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-layer">This is the first layer you'll see.</div>
  <div class="pushin-layer">Each subsequent layer will be positioned behind the previous.</div>
  <!-- Insert as many layers as desired for your scene. -->
</div>

Initializing the effect

Depending on your project, there are a few ways you can initialize this effect. Choose the one that is best for you below.

If you're using the CDN, you can use the helper function pushInStart() to start the effect. This is ideal for a minimal setup that does not require settings or configurations. However, this may not be compatible with all projects, such as those that use modular JavaScript imports or React.

<script language="text/javascript">
  pushInStart();
</script>

IMPORTANT: Only call this function once on the page, even if adding more than one PushIn effect. This function will initialize all PushIn effects on the current page.

Customizing PushIn

There are many customizations and settings you can apply to PushIn.js. Use some of the resources below as a guide.

View on GitHub