Author: | lotrekagency |
---|---|
Views Total: | 191 views |
Official Page: | Go to website |
Last Update: | May 12, 2023 |
License: | MIT |
Preview:

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:
v0.2.0 (05/12/2022)
- Added the unload util
06/23/2022
- update
v0.1.7 (06/11/2022)
- feat: new version, fixing negative calc