@lysla/afterviewportjs v0.1.7

afterviewportjs

Work in progress! Lightweight and vanilla, ready to use animation scroll library with images load control and animejs integration for svg.

**All right reserved © imagesloaded animejs

➡ Demo ⬅

Installation

npm

Execute in terminal in your project directory.

npm i @lysla/afterviewportjs

Import module in your JS.

/* Data attribute usage only */
import "@lysla/afterviewportjs";

/* Javascript ES6 usage */
import AfterViewportJs from "@lysla/afterviewportjs";

Import the style file wherever you compile SCSS.

@import "../../node_modules/@lysla/afterviewportjs/src/av.scss";

manually

Download this repository and include in your HTML page .js and .css file you will find within the dist directory.

<link rel="stylesheet" href="./path/to/afterviewportjs/style.css" />

<script src="./path/to/afterviewportjs/afterviewportjs.js"></script>

Usage

via data-av attributes

With this library you can easily use data attributes to animate anything directly from html.

Basic

Every html element you assign the data attribute to, will be animated on scroll.

<div data-av>
  <!-- any content here -->
</div>

<img data-av src="image.webp" />

Warning! You can't use this module directly for elements that are positioned absolute or fixed. If you need to, nest the element as a child of a absolute/fixed parent.

Not okay:

<div style="position:absolute" data-av></div>

Okay:

<div style="position:absolute">
  <div data-av></div>
</div>

via javascript

You can create animation groups and items programmatically via javascript.

Basic

You need to assign any selector to the html elements you want to animate.

<div class="example-class">
  <!-- any content here -->
</div>

<img src="image.webp" id="example-id" />

Then initialize the library with each selector you need.

import AfterViewportJs from "@lysla/afterviewportjs";

new AfterViewportJs(".example-class", {});

You can change general and specific settings for each item via the options parameter.

import AfterViewportJs from "@lysla/afterviewportjs";

new AfterViewportJs(".example-class", {
  group: "example-class",
  sequential: true,
  resets: true,
  onlyWhenTotallyIn: false,
  animation: "av-style-03",
  duration: "800",
  optionsItem: [
    {
      animation: "av-style-04",
      duration: "800",
      sequentialOrder: 1,
    },
    {
      animation: "av-style-02",
      duration: "800",
      sequentialOrder: 2,
    },
  ],
});

Attributes specified under the optionsItem field take priority on whatever defined for the whole group. All options take priority on any data attribute.

Options