# AlrdyAnimate Library

## Table of Contents
- [Overview](#overview)
- [Installation](#installation)
  - [Using CDN](#using-cdn)
  - [Using NPM](#using-npm)
  - [Configuration Options](#configuration-options)
- [CSS Animations triggered on scroll (via JS)](#css-animations-triggered-on-scroll-via-js)
- [CSS Animations triggered on load (CSS only)](#css-animations-triggered-on-load-css-only)
- [Animation Types](#animation-types)
  - [Fade Animations](#fade-animations)
  - [Float Animations](#float-animations)
  - [Zoom Animations](#zoom-animations)
  - [Slide Animations](#slide-animations)
  - [Blurred Slide Animations](#blurred-slide-animations)
  - [Rotate Animations](#rotate-animations)
  - [3D Animations](#3d-animations)
  - [Pseudo Overlay Reveal](#pseudo-overlay-reveal)
- [GSAP Features](#gsap-features)
  - [Text Animations](#text-animations)
  - [Slider Animations](#slider-animations)
  - [Scroll Animations](#scroll-animations)
  - [Hover Animations](#hover-animations)
- [Easing Functions](#easing-functions)
- [Setting attributes via JavaScript](#setting-attributes-via-javascript)
- [Contributing](#contributing)
- [License](#license)

## Overview

AlrdyAnimate is a lightweight JavaScript library for adding scroll-triggered animations to your web pages. It provides easy-to-use options for customizing animation behavior and supports IntersectionObserver for efficient performance. With version 2.0.0, it now includes optional GSAP integration for more powerful animations.

## Installation

You can include AlrdyAnimate in your project using either CDN or npm.

### Using CDN

```html

<!-- From GitHub  -->
<!-- Latest version-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ben-alrdy/alrdy-animate@latest/cdn/AlrdyAnimate.css">
<script src="https://cdn.jsdelivr.net/gh/ben-alrdy/alrdy-animate@latest/cdn/AlrdyAnimate.js"></script>

<!-- Or specific version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ben-alrdy/alrdy-animate@2.1.3/cdn/v2.1.3/AlrdyAnimate.css">
<script src="https://cdn.jsdelivr.net/gh/ben-alrdy/alrdy-animate@2.1.3/cdn/v2.1.3/AlrdyAnimate.js"></script>

<!-- From UNPKG -->
<!-- Latest version -->
<link rel="stylesheet" href="https://unpkg.com/alrdy-animate/dist/AlrdyAnimate.css">
<script src="https://unpkg.com/alrdy-animate/dist/AlrdyAnimate.js"></script>

<!-- Or specific version -->
<link rel="stylesheet" href="https://unpkg.com/alrdy-animate@2.1.3/dist/AlrdyAnimate.css">
<script src="https://unpkg.com/alrdy-animate@2.1.3/dist/AlrdyAnimate.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    AlrdyAnimate.init({
      ease: 'ease-in-out',
      again: false,
      viewportPercentage: 0.9,
      duration: 2,
      delay: 0.5,
      gsapFeatures: ['text', 'slider', 'scroll', 'hover']  // Specify which GSAP features to load
    }).then(() => {
      // GSAP features are now available globally
      console.log('GSAP features loaded successfully');
      
      // You can now use:
      // - gsap
      // - ScrollTrigger
      // - Draggable (if 'slider' feature was loaded)
    });
  });
</script>
```

### Using NPM

1. Install the package:
```bash
npm install alrdy-animate
```

2. Import and initialize:
```javascript
import { AlrdyAnimate } from 'alrdy-animate';
import 'alrdy-animate/dist/AlrdyAnimate.css';

document.addEventListener('DOMContentLoaded', () => {
  try {
    AlrdyAnimate.init({
      ease: 'ease-in-out',
      again: false,
      viewportPercentage: 0.6,
      duration: 2,
      delay: 0.5,
      gsapFeatures: ['text', 'loop', 'scroll']  // Specify which GSAP features to load
    }).then(() => {
      // GSAP features are now available globally
      console.log('GSAP features loaded successfully');
      
      // You can now use:
      // - gsap
      // - ScrollTrigger
      // - Draggable (if 'loop' feature was loaded)
    }).catch(error => {
      console.error('Error initializing AlrdyAnimate:', error);
    });
  } catch (error) {
    console.error('Error during initialization setup:', error);
  }
});
```

### Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `ease` | string | 'ease-in-out' | Animation easing function |
| `again` | boolean | false | Whether animations should replay when scrolling up |
| `viewportPercentage` | number | 0.6 | When element should start animating (0.0 - 1.0) |
| `duration` | number | 1 | Animation duration in seconds |
| `delay` | number | 0 | Animation delay in seconds |
| `gsapFeatures` | array | [] | GSAP features to load: ['text', 'loop', 'scroll'] |
| `debug` | boolean | false | Enable GSAP debug info |


## CSS Animations triggered on scroll (via JS)
Add the `aa-animate` attribute to the element you want to animate. Once it scrolls into view, JS will add an `in-view` class to the element and the animation will be triggered. You can also add optional attributes (see element attributes below) to customize the animation for individual elements.

- **aa-animate**: The animation type to apply. Example: `aa-animate="float-up"`.

### Element Attributes

- **aa-children**: Accepts same values as `aa-animate`, but applies animation to all children if set. Use in conjunction with `aa-stagger` to set a staggered animation and `aa-delay` to set the starting point for all children. Example: `aa-children="fade-up"`.
- **aa-ease**: Overwrites the global easing function for this element. Example: `aa-ease="ease-in-out"`.
- **aa-duration**: The animation duration for this element, in seconds. Example: `aa-duration="2"`.
- **aa-delay**: The animation delay for this element, in seconds. Example: `aa-delay="0.5"`.
- **aa-delay-mobile**: If set, overwrites the delay on mobile devices. Example: `aa-delay-mobile="0.5s"`.
- **aa-anchor**: Specify an anchor element to trigger the animation (useful for fixed elements that should be animated when the anchor scrolls into view). Example: `aa-anchor="#trigger"` on the element to be animated combined with `<div id="trigger">Headline</div>`.
- **aa-viewport**: Override the global viewport percentage for this element. Example: `aa-viewport="0.6"`.
- **aa-distance**: The distance multiplier for the animation. Example: `aa-distance="1.5"`.

## CSS Animations triggered on load (CSS only)
Add the `aa-load` attribute to the element you want to animate. The animation will be triggered immediately when the page loads. For best performance, use the CSS directly in Webflow.

- **aa-load**: The animation type to apply. Example: `aa-load="fade-up"`.

### Staggering
- You can combine the `aa-load` attribute with the `aa-stagger` attribute on a parent element to stagger the animation for up to 10 child elements. Example: `aa-stagger="0.5"`.

## CSS Animation Types

AlrdyAnimate provides a wide variety of CSS animations that can be applied using the `aa-load` attribute.

### Fade Animations
Simple fade animations with optional directional movement:
- `fade` (available for aa-load)
- `fade-up`, `fade-down`, `fade-left`, `fade-right` (available for aa-load)

### Float Animations
Fade animations with a smooth back-bounce effect:
- `float-up`, `float-down`, `float-left`, `float-right` (available for aa-load)

### Zoom Animations
Scale animations with optional directional movement:
- `zoom-in`, `zoom-out` (available for aa-load)
- `zoom-in-up`, `zoom-in-down`, `zoom-in-left`, `zoom-in-right` 
- `zoom-out-up`, `zoom-out-down`, `zoom-out-left`, `zoom-out-right` 

### Slide Animations
Pure sliding movements without opacity change:
- `slide-up`, `slide-down`, `slide-left`, `slide-right` (available for aa-load)


### Rotate Animations
Rotate animations from bottom right (br) and bottom left (bl) corners, clockwise (cw) and counter-clockwise (ccw).The base roation degree is 5 which you can multiply with the aa-distance attribute. 
- `rotate-br-cw`, `rotate-br-ccw` (available for aa-load)
- `rotate-bl-cw`, `rotate-bl-ccw` (available for aa-load)

### 3D Animations

#### Flip Animations
3D flip effects:
- `flip-left`, `flip-right`, `flip-up`, `flip-down`

#### Swing Animations
Requires a parent element to have a perspective set, e.g. `perspective: 1000px;`.
3D swing effects (anchored to top):
- `swing-fwd`, `swing-bwd` (available for aa-load)

#### Forward Turn Animations
Requires a parent element to have a perspective set, e.g. `perspective: 1000px;`.
3D rotation effects (available for aa-load):
- `turn-3d-soft`: Soft rotation around X axis
- `turn-3d-soft-3em`: Same as rotate-soft but with built-in perspective
- `turn-3d-elliptic`: Stronger elliptic rotation around X axis


### Pseudo Overlay Reveal
Creates a pseudo element on top of the content and reveals it. Add the color you want to use as a pseudo color to the animation type, e.g. `aa-animate="pseudo-reveal-up-#cccccc"`. Defaults to `var(--background-color--background-primary)` or black.
- `pseudo-reveal-up`, `pseudo-reveal-down`
- `pseudo-reveal-right`, `pseudo-reveal-left`


Example usage:
```html
<div 
  aa-animate="fade-up" 
  aa-duration="0.6" 
  aa-delay="0.2" 
  aa-distance-factor="1.5"
>
  Animated content
</div>
```


## GSAP Features

AlrdyAnimate supports several GSAP-powered features that can be enabled by including them in the `gsapFeatures` array during initialization:

### Text Animations 
(`gsapFeatures: ['text']`)

- Set the animation type with `aa-animate="text-..."`.
  - Optionally, you can add `-clip` to wrap each line in a clip wrapper and prevent overflow, resulting in a clipping effect during the animation. Example: `aa-animate="text-slide-up-clip"`.
- Pair with `aa-split` to define how to split the text for animation:
  - There are 4 split types: `lines`, `words`, `chars` or `lines&words` (i.e. both lines and words will be animated simultaneously). 
- Use `aa-scrub` to make the animation scroll-driven. There are two options: `aa-scrub="snap"` and `aa-scrub="smooth"`.
- Use `aa-stagger` to set the stagger effect for split text animations, in seconds. Example: `aa-stagger="0.05"`.

#### Available Text Animations

- `text-slide-up`: Slides the text up from the bottom.
- `text-slide-down`: Slides the text down from the top.
- `text-tilt-up`: Slides and rotates the text up from the bottom.
- `text-tilt-down`: Slides and rotates the text down from the top.
- `text-rotate-soft`: Rotates the text softly around the X axis. Best works with `aa-split="lines"`
- `text-fade-soft`: Fades the text in, starts with 30% opacity.
- `text-fade`: Fades the text in, starts with 0% opacity.
- `text-fade-up`: Fades the text in, starts with 0% opacity and slides up.
- `text-blur`: Blurs the text in, starts with 0% opacity.
- `text-blur-left`: Blurs the text in, starts with 0% opacity and slides left.
- `text-blur-right`: Blurs the text in, starts with 0% opacity and slides right.
- `text-blur-up`: Blurs the text in, starts with 0% opacity and slides up.
- `text-blur-down`: Blurs the text in, starts with 0% opacity and slides down.


### Slider Animations 
(`gsapFeatures: ['slider']`)

Creates infinite scrolling, snapping, or static slider animations. To use:

1. Add `aa-animate="slider"` to the container element. (By default, the slider will animate horizontally, but you can add `-vertical` to animate vertically.)
2. Add `aa-slider-item` attribute to each element that should be animated

#### Basic Setup

```html
<div aa-animate="slider">
  <div class="slider-container">
    <div class="slider-item" aa-slider-item>
      <div class="slider-item-content">Item 1</div>
    </div>
    <div class="slider-item" aa-slider-item>
      <div class="slider-item-content">Item 2</div>
    </div>
    <!-- Add more items as needed -->
  </div>

  <!-- Navigation Controls -->
      <button aa-slider-prev>Previous</button>
      <button aa-slider-next>Next</button>

      <!-- Counter -->
      <div class="counter">
        <span aa-slider-current>01</span>
        <span>/</span>
        <span aa-slider-total>06</span>
      </div>
</div>
```


#### Animation Types

1. **Slider Animations** (`slider`)
   - Static slider that requires navigation
   - Combine with:
     - Interaction: `-draggable` or `-snap`
     - Position: `-center` (defaults to left aligned)
   - Example: `slider-draggable-snap`

2. **Loop Animations** (`slider-loop`)
   - Continuous infinite scrolling
   - `aa-duration`: Inversely affects speed (1 is slower than 2)
   - Combine with:
     - Direction: defaults to left, add `-reverse` to animate right
     - Interaction: `-draggable`
     - Position: `-center` (defaults to left aligned)
   - Example: `slider-loop-left-draggable`

3. **Snap Animations** (`slider-snap`)
   - Snaps from one item to the next
   - `aa-duration`: Duration of each snap animation
   - `aa-delay`: Pause duration between snaps
   - Combine with:
     - Direction: defaults to left, add `-reverse` to animate right
     - Interaction: `-draggable`
     - Position: `-center` (defaults to left aligned)
   - Example: `slider-snap-right-draggable`



#### CSS Requirements
- Container needs `display: flex` and `gap` set
- Items need fixed width (percentage or pixels) and `flex-shrink: 0`
- Important: The items cannot have a border or padding; if you need such styles, nest another div inside the item and apply the styles to that nested div.
- Animations can be added to elements within items, but not directly on items


```css
.slider-container {
  display: flex;
  gap: 2rem;
}

.slider-item {
  width: 300px;
  flex-shrink: 0;
}
```

#### Navigation Controls

- Optionally, add navigation controls for the slider (These elements need to located inside the element with `aa-animate="slider"`):
  - `aa-slider-prev` and `aa-slider-next` for navigation buttons to show previous and next slide
  - `aa-slider-current` and `aa-slider-total` to display the current and total number of slides
  - `aa-slider-button` for specific buttons to jump to a certain slide
    - the number of buttons needs to match the number of slides
    - the slide that is active and the corresponding button get the class `is-active` so you can style them accordingly
    - optionally, if the buttons don't live in the same wrapper as `aa-animate = slider`, you can add `aa-slider-target=id_of_slider` to each button to control a specific slider



### Scroll Animations 
(`gsapFeatures: ['scroll']`)
Enables scroll-driven animations and effects. 

#### Sticky Navigation
- Your nav element needs to have `position: fixed` set so it is sticky.
- Use `aa-nav="change"` to add the class `is-scrolled` to the nav element when scrolling down and remove it when scrolling up. 
- Use `aa-nav="hide"` to create a sticky navigation bar that slides out of view when scrolling down and slides back in when scrolling up
  - Use `aa-ease` to set the easing. Defaults to `back.inOut`
  - Use `aa-duration` to set the duration. Defaults to `0.4s`
  - Use `aa-distance` to set the distance multiplier that the nav element will move. Example: `aa-distance="1.5"`.
- Use `aa-nav="hide-change"` to combine both effects
- Add an integer to `aa-nav` to define after how many pixels the the effect should be triggered. Example: `aa-nav="hide-change-50"`. Defaults to `100px`.

#### Background Color Transitions
- Use `aa-animate="background"` on a wrapper element you want to animate when sections inside the wrapper scroll into view
  - Optionally set `aa-duration` to define the duration of the animation and `aa-ease` to define the easing.
- Set `aa-viewport` to 0.5 to trigger the animation when the section is 50% in view.
- Set `aa-scrub` to `smooth`, `snap` or `smoother` to make the animation scroll driven.
- Use `aa-wrapper-colors` with `bg` and `text` to define the background and text colors for the wrapper once the section is scrolled into view, e.g. `aa-wrapper-colors="bg:#f0f0f0;text:#000"`.
- Use `aa-item-colors` with `bg` and `text` to change the background and text colors for child elements when they scroll into view, e.g. `aa-item-colors="bg:#ff0000;text:#fff"`.

- Example:
```html
<div class="wrapper" aa-animate="background" aa-viewport="0.5" aa-duration="0.8">
  <div class="section" aa-wrapper-colors="bg:#f0f0f0;text:#000">
    Changes wrapper background to light gray and text to black
  </div>
  <div class="section" aa-wrapper-colors="bg:#000;text:#fff" aa-item-colors="bg:#ff0000;text:#fff">
    Changes wrapper background to dark theme and self to red
    <div class="item" aa-item-colors="bg:#ff0000;text:#fff">Changes item background to red and text to white</div>
  </div>
</div>
```

#### Marquee Animations
- Use `aa-animate="marquee-left"` or `aa-animate="marquee-right"` to create a left- or right-moving marquee
- Important: Each item inside the `aa-marquee-items` wrapper needs to be spaced with `margin` (not `gap` of flexbox)
- Add `-hover` to the animation type to create a marquee that slows down on hover, e.g. `aa-animate="marquee-left-hover"`
- Add `-paused` to disabe the animation, e.g. `aa-animate="marquee-left-paused"` - use to only animate on scroll
- Use `aa-duration` to set the duration of the animation
- Use `aa-marquee-scroller` to mark the element that increases in speed on scroll; accepts integer to set the speed multiplier, e.g. `aa-marquee-scroller="10"` (defaults to 0, i.e. no speed increase on scroll)
- Use `aa-marquee-items` to mark the element that contains the items to duplicate in the marquee; accepts integer to set the number of duplicates, e.g. `aa-marquee-items="3"` (defaults to 2)


Example:
```html
<div aa-animate="marquee-left-hover" aa-duration="15" class="marquee">
  <div aa-marquee-scroller="10">
    <div aa-marquee-items>
      <div class="marquee__item">
        <p>Scroll Effects & Animations</p> 
      </div>
    </div>
  </div>
</div>
```

#### Parallax Scrolling
- Use `aa-animate="parallax-40"` on an image to create a parallax scroll effect
- The number (40) represents the movement distance in pixels
- Add direction with `aa-animate="parallax-down-40"` (moves down while scrolling) or `parallax-up-40` (default, moves up)
- Add `half` to end the parallax when the element reaches the middle of the page: `parallax-down-half-40`
- Control smoothness with `aa-scrub`:
  - `"smoother"`: Very lazy, smooth following (scrub: 5)
  - `"smooth"`: Regular smooth following (scrub: 2)
  - `"snap"`: Snaps to 20% increments
  - No value: Direct 1:1 following
- If the parent element has `overflow: hidden`, the image will be scaled to fit the parent's height
```html
<div style="height: 60vh; overflow: hidden">
  <img 
    src="image.jpg" 
    aa-animate="parallax-down-40" 
    aa-scrub="smooth"
  >
</div>
```

#### Reveal & Appear Animations
- Use `aa-animate="reveal-..."` for reveal animations that use a clip path to mask the content
- Use `aa-animate="appear-..."` for appear animations that fade/slide in content
- Optionally, add `aa-scrub` with the values `smooth`, `snap`, `smoother` or `true` to make the animation scroll-driven

Available animations:
1. Reveal Animations (by animating a clip path)
   - `reveal-up`: Reveals content with clip path sliding up
   - `reveal-down`: Reveals content with clip path sliding down
   - `reveal-left`: Reveals content with clip path sliding left
   - `reveal-right`: Reveals content with clip path sliding right
   - `reveal-center`: Reveals content with clip path splitting from center in a circle shape

2. Appear Animations (clean transitions)
   - `appear`: Simple fade in
   - `appear-up`: Fades in while sliding up
   - `appear-down`: Fades in while sliding down
   - `appear-left`: Fades in while sliding left
   - `appear-right`: Fades in while sliding right

Example usage:
```html
<!-- Reveal animation -->
<div>
  <img src="image.jpg" aa-animate="reveal-up" aa-duration="1.2" aa-ease="power2.inOut">
</div>

<!-- Appear animation -->
<div aa-animate="appear" aa-scrub="smooth">
  Content fades while scrolling
</div>
```

#### Counter Animations
Animate a number from 0 to the value of the element (it needs to be a number and can include a comma or dot as thousand separator).

- Use `aa-animate="counter"` to animate a number from 0 to the target number
- Use `aa-animate="counter-10"` to animate a number from 10 to the target number
- Optionally, add `aa-scrub` to make the animation scroll-driven

### Hover Animations

The AlrdyAnimate library includes powerful hover animations using GSAP. These animations can be applied to elements by adding the `aa-hover` attribute. Generally, you can use `aa-delay` and `aa-duration` to set the delay and duration of the animation.

#### Available Hover Animations


1. **Text Animations** (`aa-hover="text-..."`) 
  - Animate text elements with sliding or fading effects. 
  - Mark the text you want to animate with `aa-hover-text`.
  - Requires a wrapper element around the `aa-hover-text` that has position set to `relative` or `absolute` and overflow set to `hidden`.
  - Requires `aa-split` attribute to be set (e.g. `aa-split="words"`), optionally add `aa-stagger` 
  - use `aa-distance` to set distance/delay between the original and the clone.
  - Available animations:
    - Text Sliding: `text-slide-up`, `text-slide-down`, `text-slide-left`, `text-slide-right`
    - Text Fading: `text-fade-up`, `text-fade-down`, `text-fade-left`, `text-fade-right`
      - For fading effects, the element with `aa-hover-text` should include padding to make room for the fade effect.
    - add `-reverse` to the animation type to play the animation in reverse when hovering out, e.g. `aa-hover="text-slide-up-reverse"`.

2. **Background Circle Animation** (`aa-hover="bg-circle"`)
  - Expands a circle from the hover point.
  - Requires a circle SVG path in the background, tagged with `aa-hover-bg`.
  - Optionally, you can define the hover direction with `aa-hover-direction` (possible values: `all`, `top`, `bottom`, `left`, `right`, `vertical`, `horizontal`).

3. **Background Curve Animation** (`aa-hover="bg-curve"`)
  - Animates an SVG path to create a wave effect.
  - Requires an SVG path in the background, tagged with `aa-hover-bg`.
  - Optionally, you can define the hover direction with `aa-hover-direction` (possible values: `all`, `top`, `bottom`, `left`, `right`, `vertical`, `horizontal`).

4. **Background Expand Animation** (`aa-hover="bg-expand"`)
  - Expands a shape inside the element to fill the element.
  - Requires a div nested inside the element, tagged with `aa-hover-bg`, that will expand to fill the element.
  - Optionally, you can add `-reverse` to `aa-hover` to play the animation in reverse when hovering out, e.g. `aa-hover="bg-expand-reverse"`.

5. **Icon Animations** (`aa-hover="icon-..."`)
  - Animates an icon on hover.
  - Requires an svg element nested inside the element, tagged with `aa-hover-icon`.
  - Define direction of the icon animation with `aa-hover-direction` on the aa-hover element (possible values: `right`, `up-right`, `down-right`, `left`, `up-left`, `down-left`, `up`, `down`).
  - Optionally, you can add `-reverse` to `aa-hover` to play the animation in reverse when hovering out, e.g. `aa-hover="icon-right-reverse"`.

For all hover animations, you can optionally add `aa-hover-text-color` or `aa-hover-bg-color` to any element inside the aa-hover element to animate the text or background color. The text elements will be positioned relative with z-index set to 1.

You can combine hover animations with the `&` operator, e.g. `aa-hover="bg-expand&icon-right"`.

To set content above the background, add `aa-hover-content` to the respective element (or position it via CSS).


#### HTML Examples

```html
<a class="button" href="#" aa-hover="bg-circle" aa-hover-direction="all" aa-duration="1">
  <div aa-hover-text>Circle button</div>
  <svg class="bg-filler" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice" aa-hover-bg>
    <circle cx="0.5" cy="0.5" r="0" fill="currentColor"></circle>
  </svg>
</a>

<a class="button" href="#" aa-hover="bg-curve" aa-hover-direction="vertical" aa-duration="0.8">
  <div aa-hover-text>Vertical Only</div>
  <svg class="bg-filler" viewBox="0 0 100 100" preserveAspectRatio="none" aa-hover-bg>
    <path d="M 0 100 V 0 Q 250 0 500 0 V 0 H 0 z" fill="currentColor"></path>
  </svg>
</a>
```





## Easing Functions

AlrdyAnimate supports a variety of easing functions for both CSS and GSAP animations. Here's a quick reference:

### Standard Easings
- `linear`: No easing, no acceleration
- `ease`: Slight acceleration at the beginning, then deceleration (default CSS easing)
- `ease-in`: Gradual acceleration from zero velocity
- `ease-out`: Gradual deceleration to zero velocity
- `ease-in-out`: Acceleration until halfway, then deceleration

### Power Easings (GSAP style)
- `power1.in`, `power1.out`, `power1.inOut`: Subtle easing (equivalent to Quad)
- `power2.in`, `power2.out`, `power2.inOut`: Moderate easing (equivalent to Cubic)
- `power3.in`, `power3.out`, `power3.inOut`: Strong easing (equivalent to Quart)
- `power4.in`, `power4.out`, `power4.inOut`: More pronounced easing (equivalent to Quint)

### Specific Named Easings
- `back.in`, `back.out`, `back.inOut`: Slightly overshoots, then returns
- `circ.in`, `circ.out`, `circ.inOut`: Circular motion feel
- `expo.in`, `expo.out`, `expo.inOut`: Exponential acceleration or deceleration
- `sine.in`, `sine.out`, `sine.inOut`: Sinusoidal easing, smooth and gentle

### Easing Suffixes
- `.in`: Easing starts slowly and accelerates
- `.out`: Easing starts quickly and decelerates
- `.inOut`: Easing starts slowly, accelerates in the middle, then decelerates

Note: 'Elastic' and 'Bounce' easings are available when using GSAP but not for CSS animations.

Usage example:
```html
<div aa-animate="fade-up" aa-ease="back.out">Animated content</div>
```

This will apply a fade-up animation with a 'back out' easing, which means it will slightly overshoot and then settle into place.


## Setting attributes via JavaScript

If you'd like to set the same animation on a certain class or element, you can do so via JavaScript:

```javascript
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('h1').forEach((element) => {       //or querySelectorAll('.my-class')
    if (!element.hasAttribute('aa-animate')) {
      element.setAttribute('aa-animate', 'text-tilt-up');
      element.setAttribute('aa-split', 'words'); 
      element.setAttribute('aa-duration', '0.5');  
    }
  });
  
  AlrdyAnimate.init({
    easing: 'power1.out',
    again: true,
    useGSAP: true  
  });
});
```

If you want a page refresh to always start from the top, you can add this script to the head tag, so it runs before the page loads:
```javascript
if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}
window.scrollTo(0, 0);
```

## Contributing

Contributions are welcome! Please fork the repository and submit pull requests for any improvements.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.