Smooth And Responsive Scroll Animation Library – vagajs

Category: Animation , Javascript | June 23, 2022
0 Comment
Demo Download
Author:lotrekagency
Views Total:417 views
Official Page:Go to website
Last Update:June 23, 2022
License:MIT

Preview:

Smooth And Responsive Scroll Animation Library – vagajs

Description:

The vagajs JavaScript library provides a small collection of CSS animations that you can use to spice up your next project. As soon as the elements become visible, they start to animate.

Built on top of Intersection Observer API and easy to extend.

How to use it:

1. Import the vagajs.

// required modules
import {options} from './animations.js';
import {observingScroll} from './observer.js';
// stylesheet (CSS animations)
import styles from './scss/vaga.scss';

2. Initialize the library.

export function start (customOptions) {
  if(document.querySelector('.vaga-block')) {
    document.querySelector('.vaga-block').classList.remove('vaga-block')
  }
  if(customOptions !== undefined) {
    const finalOptions = Object.assign(options, customOptions);
    observingScroll(finalOptions);
  } else {
    observingScroll(options);
  }
}
vaga.start();

3. Add the vaga-* attribute to the element and determine the animation type:

<div class="vaga-fade-in">Fade In</div>
<div class="vaga-fade-out">Fade Out</div>
<div class="vaga-fade-right">Fade Right</div>
<div class="vaga-fade-left">Fade Left</div>
<div class="vaga-move-in">Move In</div>
<div class="vaga-move-out">Move Out</div>
<div class="vaga-move-right">Move Right</div>
<div class="vaga-move-left">Move Left</div>
<div class="vaga-opacity">Opacity</div>

4. Determine which animation type to use based on the screen size.

<div class="vaga-fade-in vaga-move-right--lg">Desktop</div>
<div class="vaga-fade-in vaga-move-right--md">Tablet</div>

5. Specify the animation delay.

<div class="vaga-fade-in vaga-delay-1">0.375s</div>
<div class="vaga-fade-in vaga-delay-0-5">0.375s*0.5</div>
<div class="vaga-fade-in vaga-delay-1-5">0.375s*1.5</div>

6. Add the vaga-will class to the element for smoother animations.

<div class=”vaga-fade-in vaga-will”>Smooth Animation</div>

7. To block animations until the page finishes loading, add the vaga-block class to the parent container.

<body class="vaga-block">
  ...
</body>

8. Customize the animation size in px.

<div class="vaga-move-right" data-vsize="60"></div>

9. Customize the vagajs.

var options = {
    root: null,
    rootMargin: 0,
    threshold: 0.25,
    duration: 0.375,
    targets: document.querySelectorAll("[class*='vaga-'"),
    timingFunction: "ease-in"
};
vaga.start(options)

Changelog:

06/23/2022

  • update

v0.1.7 (06/11/2022)

  • feat: new version, fixing negative calc

See Also:

You Might Be Interested In:

Leave a Reply