• Examples Getting started Documentation Customizing

VagaJS

A simple and straightforward animation library to enable CSS based animations on scroll, as soon as the elements become visible by the user.

npm install vagajs
import * as vaga from "vagajs/build/vaga.min.js";
import "vagajs/build/vaga.min.css"; //or import it in your CSS workflow
vaga.start();

IntersectionObserver + CSS

Simple yet modern: using the IntersectionObserver API and CSS transitions to make a set of animations for your web projects, all you've to do is to simply add CSS classes to the target elements you want to animate.

Fade left

Fade in, with some delay

Move left

Opacity

Move in, with even more delay

Getting started

Install VagaJS via a packet manager, such as npm:
npm install vagajs
Then import it as a module in your javascript build:
import * as vaga from "vagajs/build/vaga.min.js";
import "vagajs/build/vaga.min.css"; //or add it in your CSS workflow
Now to run it simply start VagaJS somewhere in your javascript build:
vaga.start();

VagaJS can work by simply adding its CSS classes on HTML elements once you've installed, imported it in your web project and started it.
Let's say you want to play a fade in animation on an element, here's how it works:
<div class="vaga-fade-in">Hello there!</div>
Here's how the VagaJS CSS classes work: .vaga-<property>-<direction>
property: there are currently 3 properties, which are fade, move and opacity.
direction: there are 4 directions, which are in, out, left and right. (The opacity property has no directions!)

Documentation

Animation classes

Fade in

Add the .vaga-fade-in CSS class to the HTML element.
example: <div class="vaga-fade-in"></div>

Fade out

Add the .vaga-fade-out CSS class to the HTML element.
example: <div class="vaga-fade-out"></div>

Fade left

Add the .vaga-fade-left CSS class to the HTML element.
example: <div class="vaga-fade-left"></div>

Fade right

Add the .vaga-fade-right CSS class to the HTML element.
example: <div class="vaga-fade-right"></div>

Move in

Add the .vaga-move-in CSS class to the HTML element.
example: <div class="vaga-move-in"></div>

Move out

Add the .vaga-move-out CSS class to the HTML element.
example: <div class="vaga-move-out"></div>

Move left

Add the .vaga-move-left CSS class to the HTML element.
example: <div class="vaga-move-left"></div>

Move right

Add the .vaga-move-right CSS class to the HTML element.
example: <div class="vaga-move-right"></div>

Opacity

Add the .vaga-opacity CSS class to the HTML element.
example: <div class="vaga-opacity"></div>

Custom length/size

data-vsize="60"
Both fade and move animations have a default transform length of 40px (20px on mobile), to customize this option you need to add a dataset with vsize as the datataset property and an integer number as the value.
example: <div class="vaga-move-right" data-vsize="60"></div>
This will make the element move from a starting point of 60px instead of 40px, which will be half of that value in mobile (30px).

Util classes

Responsive util

.vaga-fade-in--<breakpoint>
By adding --md or --lg to the vaga animations you're going to make them responsive, like .vaga-move-right--lg is going to move the element only on large devices such as desktops.

Want to have a fade-in on an element when it's viewed in a mobile device and then replacing that animation with a fade-left when viewed on bigger viewports?
<div class="vaga-fade-in vaga-fade-left--md">Responsive fades</div>

Delay util

.vaga-delay-<value>
Sometimes you want to have a bit of delay between animations, and for this issue VagaJS comes with a delay util.
This util will apply a delay based on its value, where the values are 1, 2, 3 and 4.
.vaga-delay-0-5 - will apply a delay of duration * 0.5. duration is an option, and its default is 0.375s, so this util will apply a delay of half of that value.
.vaga-delay-1 - will apply a delay of duration * 1 (which would be 0.375s).
.vaga-delay-1-5 - will apply a delay of duration * 1.5 (which would be 0.375s * 1.5).
.vaga-delay-2 - will apply a delay of duration * 2 (which would be 0.375s * 2).
And so on, up to .vaga-delay-6, which is duration * 6.

Unload util

.vaga-unload
To unload animations after the element is no longer visible.

Will-change (perfomance) util

.vaga-will - applies will-change: transform; for smoother animations

Blocking animations until window is loaded

.vaga-block - trick to have smooth animations and transitions only when the window is loaded, add this to the parent/grandparent element such as the body.

Customizing VagaJS

VagaJS has a set of default options to make it work right off the bat, however you can customize the options easily.
Here are VagaJS' default options:

root - default value is null, this is an IntersectionObserver's parameter.
rootMargin - default value is 0px, this is an IntersectionObserver's parameter.
threshold - default value is 0.25 (max value is 1), this is an IntersectionObserver's parameter.
targets - default value is document.querySelectorAll("[class*='vaga-'"), this is an IntersectionObserver's parameter.
duration - default is 0.375s, CSS transition-duration.
timingFunction - default is ease-in, CSS transition-timing-function (can accept cubic-bezier() functions).

To customize these options, simply do like this:
var options = { threshold: 0.15, duration: 0.75, timingFunction: "linear" }; vaga.start(options)