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

| Attribute | Option | Description | Default value | Possible values | Examples | | ---------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | data-av | group: string | Data attributes: Mandatory for every element that needs to be animated via data attributes. Can be used to group different set of elements to be animated in different ways.Javascipt: The elements are identified via selector and the group name it's set in the options object. | no value | no valuestring | Data attributes: <div data-av></div><div data-av="my-group-name"></div> Javascript: new AfterViewportJs(".example-class", { group: "example-group" }); | | data-av-animation | animation: string | Change the type of animation on scroll for the element | av-style-01 | av-style-01av-style-02...av-style-14 | Data attributes: <div data-av data-av-animation="av-style-01"></div> Javascript: new AfterViewportJs(".example-class", { animation: "av-style-02" }); | | data-av-animation-duration | duration: string | Change the duration (in ms) of the animation for the element | 300 | any value multiple of 100 between 0 and 5000 | Data attributes: <div data-av data-av-animation-duration="700"></div> Javascript: new AfterViewportJs(".example-class", { duration: "900" }); | | data-av-animation-delay | delay: string | Change the delay (in ms) of the animation for the element | 0 | any value multiple of 100 between 0 and 5000 | Data attributes: <div data-av data-av-animation-delay="700"></div> Javascript: new AfterViewportJs(".example-class", { delay: "900" }); | | data-av-resets | resets: boolean | If present, the element will animate everytime it's back into viewport. Otherwise, it will animate only the first time. | false | no valueboolean | Data attributes: <div data-av data-av-resets></div> Javascript: new AfterViewportJs(".example-class", { resets: true }); | | data-av-only-when-totally-in | onlyWhenTotallyIn: boolean | If present, the elements will start the animation only when fully inside the viewport. Otherwise, it will start even when the elements are partially inside. This attribute relates to the whole group of elements, see data-av attribute to create multiple groups. | false | no valueboolean | Data attributes: <div data-av data-av-only-when-totally-in></div> Javascript: new AfterViewportJs(".example-class", { onlyWhenTotallyIn: true }); | | data-av-sequential | sequential: boolean | Data attributes: If present, a sequence of elements animation will start for all elements of the same group. A order of the sequence can be given to each element, specifying a number as value. Javascript: While you need to set the sequential attribute for the whole group, you can use the field optionsItem to set a preferred sequentialOrder for each element of the group. | false | no valuenumberboolean | Data attributes: <div data-av data-av-sequential></div><div data-av="my-group-name" data-av-sequential="3"></div><div data-av="my-group-name" data-av-sequential="2"></div><div data-av="my-group-name" data-av-sequential="1"></div> Javascript: new AfterViewportJs(".example-class", { sequential: true, optionsItem: [{ sequentialOrder: 2 }, { sequentialOrder: 1 }]}); | | n\a | optionsItem: array<object> | Javascript only. You can override some* group proprieties using this array option field.* animation, duration, delay, sequentialOrder | no value | no valueobject | Javascript only: new AfterViewportJs(".example-class", { optionsItem: [{ animation: "av-style-04", duration: "800", delay: "1000",sequentialOrder: 2 }]}); | | data-av-typewriter | typewriter: boolean | This unique property searches for the text contained in the selector, and separates each letter to animate them by themselves. For realistic typewriter animation, set sequential to true, otherwise all characters will animate at the same time. | false | no valueboolean | Data attributes:<div data-av data-av-typewriter data-av-sequential> ...Lorem ipsum... </div> Javascript:new AfterViewportJs(".example-class", { typewriter: true, sequential: true }); | | data-av-inline | inline: boolean | For elements that needs to be display:inline and animated. | false | no valueboolean | Data attributes:<div data-av data-av-inline> ...Lorem ipsum... </div> Javascript:new AfterViewportJs(".example-class", { inline: true }); | | data-av-parallax | parallax: boolean | For elements that needs the parallax scrolling effect. Using number values it's possible to change the depth of effect. | false | no valuenumberboolean | Data attributes: <div data-av data-av-parallax></div><div data-av="my-group-name" data-av-parallax="3"></div><div data-av="my-group-name" data-av-parallax="2"></div><div data-av="my-group-name" data-av-parallax="1"></div> Javascript: new AfterViewportJs(".example-class", { parallax: true, optionsItem: [{ parallaxOrder: 2 }, { parallaxOrder: 1 }]}); |