Animasis.js: The Effortless Micro-Interaction Library

Why Animasis.js?

All the features you need for delightful interactions.

✨

Zero JavaScript

Add animations directly in your HTML for most use cases. It's plug-and-play.

👆

Trigger-Based

Animate on user actions like `hover`, `click`, `scroll`, or on page `load`.

🎨

Highly Customizable

Easily control duration, easing, delay, and target elements via attributes.

⚡️

Lightweight & Fast

No dependencies and a tiny footprint ensures your site stays performant.

Incredibly Simple Syntax

The core syntax is `trigger:animation | duration | easing | delay`. That's it.

<button data-animasis="hover:pulse | 500ms | ease-out | 100ms">
  Hover Me!
</button>

A Glimpse of the Library

See a fraction of what Animasis.js can do. Interact with the elements below.

1. Attention Seekers

<button data-animasis="hover:shake-x">Shake</button>
<button data-animasis="hover:jello">Jello</button>
<button data-animasis="hover:wobble">Wobble</button>
<button data-animasis="hover:heart-beat">Heart Beat</button>

2. Scroll-Triggered Entrances

These elements animated as you scrolled.

Bounce In Up

Flip In X

Zoom In Left

Jack In The Box

<div data-animasis="scroll:bounce-in-up">...</div>
<div data-animasis="scroll:flip-in-x | 1s | 200ms">...</div>
<div data-animasis="scroll:zoom-in-left | 800ms | 400ms">...</div>
<div data-animasis="scroll:jack-in-the-box | 1s | 600ms">...</div>

3. Click-Triggered Exits

Hinge

Bounce Out

Flip Out Y

Zoom Out Right

<div data-animasis="click:hinge | 2s">...</div>
<div data-animasis="click:bounce-out">...</div>
<div data-animasis="click:flip-out-y">...</div>
<div data-animasis="click:zoom-out-right">...</div>

4. Targeting Other Elements

<button 
  data-animasis="hover:pulse" 
  data-animasis-target="#my-image">
  Hover Me
</button>

<div id="my-image"></div>

Documentation

A comprehensive guide to all the attributes and options available in Animasis.js.

Core Syntax: `data-animasis`

The main attribute that powers the library. The value is a string with one or more instructions, separated by semicolons (`;`). Each instruction follows this pattern:

trigger:animation | duration | easing | delay

Global Attributes

These attributes control behavior for an element's animations.

Attribute	Description
`data-animasis-target`	A CSS selector for an element to animate instead of this one.
`data-animasis-once`	For `scroll` triggers. Set to `false` to replay the animation every time the element enters the viewport. Defaults to `true`.
`data-animasis-duration`	Sets a default duration for all animations on this element (e.g., `500ms`).
`data-animasis-easing`	Sets a default easing function (e.g., `ease-in-out`).
`data-animasis-delay`	Sets a default delay (e.g., `100ms`).

Pre-defined Animations

A massive library of ready-to-use animations. Most have a default duration of 300ms.

Animation	Description
Attention Seekers
`bounce`	Bounces the element up and down.
`flash`	Flashes the element by changing opacity.
`pulse`	Gently scales the element up and down.
`rubber-band`	Stretches the element like a rubber band.
`shake-x`	Shakes the element horizontally.
`shake-y`	Shakes the element vertically.
`head-shake`	A more subtle, side-to-side head shaking motion.
`swing`	Swings the element back and forth.
`tada`	A celebratory scale and wobble animation.
`wobble`	Wobbles the element with a drunk-like motion.
`jello`	A gelatinous, wobbly effect.
`heart-beat`	A throbbing heart beat effect.
Entrances
`fade-in`	Fades the element in.
`fade-in-down`	Fades and slides in from above.
`fade-in-up`	Fades and slides in from below.
`fade-in-left`	Fades and slides in from the left.
`fade-in-right`	Fades and slides in from the right.
`slide-in-down`	Slides in from above.
`slide-in-up`	Slides in from below.
`slide-in-left`	Slides in from the left.
`slide-in-right`	Slides in from the right.
`zoom-in`	Zooms in from the center.
`zoom-in-down`	Zooms and slides in from above.
`zoom-in-up`	Zooms and slides in from below.
`zoom-in-left`	Zooms and slides in from the left.
`zoom-in-right`	Zooms and slides in from the right.
`bounce-in`	Bounces in with a scaling effect.
`bounce-in-down`	Bounces in from above.
`bounce-in-up`	Bounces in from below.
`bounce-in-left`	Bounces in from the left.
`bounce-in-right`	Bounces in from the right.
`flip-in-x`	Flips in around the horizontal axis.
`flip-in-y`	Flips in around the vertical axis.
`rotate-in`	Rotates into view.
`jack-in-the-box`	A surprising, popping entrance effect.
Exits
`fade-out`	Fades the element out.
`fade-out-down`	Fades and slides out to the bottom.
`fade-out-up`	Fades and slides out to the top.
`fade-out-left`	Fades and slides out to the left.
`fade-out-right`	Fades and slides out to the right.
`slide-out-down`	Slides out to the bottom.
`slide-out-up`	Slides out to the top.
`slide-out-left`	Slides out to the left.
`slide-out-right`	Slides out to the right.
`zoom-out`	Zooms out to the center.
`zoom-out-down`	Zooms and slides out to the bottom.
`zoom-out-up`	Zooms and slides out to the top.
`zoom-out-left`	Zooms and slides out to the left.
`zoom-out-right`	Zooms and slides out to the right.
`bounce-out`	Bounces out with a scaling effect.
`bounce-out-down`	Bounces out to the bottom.
`bounce-out-up`	Bounces out to the top.
`bounce-out-left`	Bounces out to the left.
`bounce-out-right`	Bounces out to the right.
`flip-out-x`	Flips out around the horizontal axis.
`flip-out-y`	Flips out around the vertical axis.
`rotate-out`	Rotates out of view.
`hinge`	A dramatic exit where the element drops like a hinge.

Custom Animations

Define your own animations using CSS properties with the syntax `property(value)`.

<!-- Animate multiple CSS properties at once -->
<div data-animasis="hover:transform(scale(1.1) rotate(5deg)) opacity(0.8) | 300ms">
  Custom Animation
</div>

Advanced JavaScript API

For complete control over complex, sequential, or dynamic animations, use the `window.Animasis.timeline()` method. This method is a wrapper around the Web Animations API.

document.getElementById('run-advanced-animation')
  .addEventListener('click', () => {
    Animasis.timeline('#advanced-box', 
      [
        { transform: 'translateY(50px) scale(0.8)', opacity: 0 },
        { transform: 'translateY(-10px) scale(0.8)', offset: 0.7 },
        { transform: 'translateY(0) scale(1)', opacity: 1 }
      ], 
      {
        duration: 1200,
        easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
      }
    );
});

Get Started with Animasis.js

Just add the script tag to your HTML file before the closing `</body>` tag.

<script src="https://api.chiragganguli.com/library/js/animasis/main.js"></script>

Effortless Micro-Interactions.