AlrdyAnimate v2 - Complete Animation Library

A powerful, lightweight JavaScript library for creating scroll-triggered and interactive animations. Built with performance in mind, featuring both CSS-only animations and advanced GSAP-powered effects.

Table of Contents

- Installation & Setup
- Core Concepts
- Animation Types
- 1. Scroll Animations
- 1.1 CSS Animations
- 1.2 Load Animations (CSS-Only)
- 1.3 Text Animations
- 1.4 Appear Animations
- 1.5 Parallax
- 1.6 Glide
- 1.7 Section Background Color
- 1.8 Section Clip
- 1.9 Section Stack
- 1.10 Pin (GSAP-Powered Sticky)
- 2. Hover Animations
- 3. Interactive Components
- 3.1 Slider
- 3.2 Accordion
- 3.3 Marquee
- 3.4 Modal
- 3.5 Navigation
- Advanced Features
- Configuration Reference
- Performance & Accessibility
- Contributing
- License

---

Installation & Setup

$3

#### UNPKG (Recommended)
``html


href="https://unpkg.com/alrdy-animate@7.0.12/dist/AlrdyAnimate.css"
as="style"
onload="this.onload=null;this.rel='stylesheet'">





`

#### GitHub CDN (Alternative)
`html







`

$3

#### Basic Setup
Perfect for simple animations and getting started quickly:

`html


href="https://unpkg.com/alrdy-animate@7.0.12/dist/AlrdyAnimate.css"
as="style"
onload="this.onload=null;this.rel='stylesheet'">





`

#### Complete Setup
Full-featured setup with GSAP animations, smooth scrolling, and modals:

`html





`

---

Core Concepts

$3

AlrdyAnimate supports multiple animation triggers:

| Trigger | Attribute | Description | Use Case |
|---------|-----------|-------------|----------|
| Scroll | aa-animate | Triggers when element enters viewport | Most common animations |
| Load | aa-load | Triggers immediately on page load | Hero sections, above-fold content |
| Hover | aa-hover | Triggers on mouse hover | Interactive elements, buttons |

$3

Control exactly when animations trigger using GSAP ScrollTrigger syntax:

`html



| Pattern | Example | Purpose |
|---------|---------|---------|
| aa-animate | aa-animate="fade-up" | Primary animation type |
| aa-[property] | aa-duration="0.8" | Animation properties |
| aa-[feature] | aa-slider="draggable", aa-accordion="multi", aa-marquee="left" | Interactive component behavior |
| aa-[feature]-[element] | aa-slider-item, aa-accordion-toggle, aa-marquee-scroller | Feature-specific elements |

$3

#### Children Animations
Apply animations to all child elements with staggering:

`html



`html



Available Animations:
- Fade: fade, fade-[direction] where [direction] = up, down, left, right
- Float: float-[direction] (with bounce) where [direction] = up, down, left, right
- Slide: slide-[direction] where [direction] = up, down, left, right
- Zoom: zoom-in, zoom-out, zoom-in-[direction], zoom-out-[direction] where [direction] = up, down, left, right
- Rotate: rotate-[position]-[rotation] where [position] = br, bl, tr, tl, c and [rotation] = cw, ccw
- Base rotation: 5 degrees (multiply with aa-distance for stronger effect)
- Position: br = bottom-right, bl = bottom-left, tr = top-right, tl = top-left, c = center
- Rotation: cw = clockwise, ccw = counter clockwise
- 3D: swing-fwd, swing-bwd, turn-3d-soft, turn-3d-elliptic, flip-[direction] where [direction] = up, down, left, right
- Blur: blur, blur-in
- Pseudo Reveal: pseudo-reveal-[direction]#color where [direction] = up, down, left, right

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | Animation name | - | Animation type |
| aa-duration | Number (seconds) | 1 | Animation duration |
| aa-delay | Number (seconds) | 0 | Animation delay |
| aa-delay-mobile | Number (seconds) | - | Mobile-specific delay |
| aa-distance | Number | 1 | Distance multiplier |
| aa-opacity | Number (0-1) | 1 | Final opacity value, use for css, appear and reveal animations |
| aa-ease | Easing function | ease-in-out | Animation easing |
| aa-scroll-start | Position | top 80% | When animation starts |
| aa-anchor | CSS selector | - | Trigger element |

Examples:
`html


Setup: Use aa-load attribute (no AlrdyAnimate.init() required)

Available Animations: Similar to the above CSS animations, check the code file in Webflow

Hybrid Mode: Combine aa-load with aa-animate for automatic fallback (see Hybrid Load Animations in Advanced Features)

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-load | Animation name | - | Animation triggered on page load |
| aa-stagger | Number (seconds) | - | (Parent) Stagger child animations |
| aa-delay | Number (seconds) | - | Delay for animation |
| aa-duration | Number (seconds) | - | Duration for animation |

Examples:
`html



Setup: gsapFeatures: ['text']

Available Animations:
- Slide: text-slide-[direction] where [direction] = up, down, left, right
- Tilt: text-tilt-[direction] where [direction] = up, down
- Fade: text-fade, text-fade-10, text-fade-30 (opacity-only animations)
- Scale: text-scale-up
- Blur: text-blur, text-blur-[direction] where [direction] = up, down, left, right
- Rotate: text-rotate-soft (3D rotation around X-axis)
- Block: text-block-[direction] where [direction] = up, down, left, right
- Use aa-color to define block background and optional text color
- Format: aa-color="bg:#hex" or aa-color="bg:#hex text:#hex"
- Oval: text-oval-[direction] where [direction] = up, down
- Uses ellipse clip-path to reveal text line by line
- Supports aa-color attribute for color transitions

Color Transitions:
All text animations support the aa-color attribute for smooth color transitions. Colors animate from the specified aa-color values to the original element colors.

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | text-[type] | - | Text animation type |
| aa-split | words, chars, lines, lines&words | words | How to split text |
| aa-stagger | Number (seconds) | 0.05 | Delay between split elements |
| aa-duration | Number (seconds) | 0.8 | Animation duration |
| aa-scrub | empty or number | true | Scroll-driven animation. true = direct mapping, number = lag (higher = more lag) |
| aa-color | text:#hex bg:#hex border:#hex | - | Color transitions (animates from these colors to original) |

Examples:
`html



Word by word

Setup: gsapFeatures: ['section']

Available Animations:
- Appear: appear, appear-up/down/left/right
- Reveal: reveal-up/down/left/right/center (clip path)
- Oval Reveal: reveal-oval-up/down/left/right (ellipse clip path)
- Slices Reveal: reveal-slices-7, reveal-slices-up/down/left/right, reveal-slices-[direction]-[count] (horizontal slices with staggered vertical reveal)
- Counter: counter, counter-[startNumber]
- Grow: grow-horizontal, grow-vertical (animates from 0 to auto size with optional color transitions)

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | Animation name | - | Animation type |
| aa-duration | Number (seconds) | 0.8 | Animation duration |
| aa-delay | Number (seconds) | 0 | Animation delay |
| aa-distance | Number | 1 | Distance multiplier (for slices: controls slice height variation) |
| aa-stagger | Number (seconds) | 0.02 | Stagger delay between slices (slices reveal only) |
| aa-scrub | empty or number | true | Scroll-driven animation. true = direct mapping, number = lag (higher = more lag) |
| aa-color | bg:#hex text:#hex border:#hex | - | Color transitions for grow animation |

Examples:
`html


1,250
500

5 slices (default)

7 slices, up direction

Variable slice heights

Grows width from 0 to auto

Grows height from 0 to auto

Grows with color transition

Setup: gsapFeatures: ['parallax']

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | parallax, parallax-horizontal | - | Parallax type |
| aa-parallax-target | CSS selector | Self | Element to animate |
| aa-parallax-start | Number (%) | 10 | Start position |
| aa-parallax-end | Number (%) | -10 | End position |
| aa-scroll-start | Position | top bottom | When to start |
| aa-scroll-end | Position | bottom top | When to end |
| aa-scrub | empty or number | true | Scroll-driven animation. true = direct mapping, number = lag (higher = more lag) |

Examples:
`html






Setup: gsapFeatures: ['parallax']

How It Works:
- Elements drift in the opposite direction of scroll (scrolling down makes elements move up)
- Effect is continuous while element is in viewport
- Uses frame-based updates (60fps) for smooth damping and decay
- Automatically disabled on mobile (< 1080px) for better performance

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | glide | - | Glide animation type |
| aa-delay | Number (0.85-0.95) | 0.9 | Damping factor - controls how quickly elements return to position. Lower = snappier (0.85), Higher = floatier (0.95) |
| aa-distance | Number | 1 | Float intensity multiplier - controls how far elements drift. Higher = more dramatic effect |

Examples:
`html




G
l
i
d
e


Setup: gsapFeatures: ['section']

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | background | - | Background transition |
| aa-duration | Number (seconds) | 0.8 | Transition duration |
| aa-ease | Easing function | power2.inOut | Transition easing |
| aa-scrub | empty or number | true | Scroll-driven animation. true = direct mapping, number = lag (higher = more lag) |
| aa-wrapper-colors | bg:color;text:color | - | Wrapper colors |
| aa-item-colors | bg:color;text:color | - | Item colors |

Examples:
`html


Setup: gsapFeatures: ['section']

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | clip | - | Clip animation |
| aa-scroll-start | Position | top bottom | When to start |
| aa-scroll-end | Position | bottom top | When to end |

Examples:
`html


Setup: gsapFeatures: ['section']

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | stack | - | Stack animation |
| aa-distance | Number | 1 | Stack distance |
| aa-scrub | empty or number | true | Scroll-driven |

Examples:
`html


Pin elements during scroll using GSAP's ScrollTrigger. This is superior to CSS position: sticky when working with ScrollTrigger animations because:
- ✅ ScrollTrigger is aware of pinned elements and adjusts calculations automatically
- ✅ Creates spacer elements to maintain document flow
- ✅ All ScrollTriggers coordinate seamlessly

Setup: gsapFeatures: ['section']

Touch Device Support: Pin and pin-stack animations are automatically disabled on touch devices for better user experience. This prevents disruption of native scrolling gestures and maintains smooth touch interactions.

#### Simple Pin

Pin a single element during scroll.

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | pin | - | Pins element during scroll |
| aa-pin-start | ScrollTrigger position | top 10% | When pinning starts |
| aa-pin-end | ScrollTrigger position | +=100% | When pinning ends |

Examples:
`html



How It Works:
1. Parent element gets pinned and becomes a grid container
2. Children are positioned to overlap using grid-area
3. Each child animates from below into stacked position
4. Gap from CSS row-gap is automatically respected

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-animate | pin-stack | - | Enables pin-stack animation |
| aa-pin-in | fade, scale, rotate, or null | null (simple slide) | How cards appear from below |
| aa-pin-out | perspective, scale, fade, blur, or null | null (no effect) | How cards react when next card appears |
| aa-pin-trigger-animation | 0.5 | 0.7 | Percentage of viewport when aa-animate animations inside a pinned child are triggered |
| aa-pin-start | ScrollTrigger position | top 10% | When animation starts |
| aa-pin-end | ScrollTrigger position | +=100% | When animation ends |

In-Animation Types:
- null (default) - Simple slide up with no extra effects
- fade - Cards fade in (opacity 0 → 1) as they slide up
- scale - Cards scale up (0.8 → 1.0) as they appear
- rotate - Cards rotate (±15°) as they slide up (alternating direction)

Out-Animation Types:
- null (default) - Cards stay in final position
- perspective - Cards tilt back and scale down when next card appears
- scale - Cards scale down when next card appears
- fade - Cards fades out when next card appears
- fade-scale - Cards fades out and scales down when next card appears
- blur - Cards blur when next card appears
- right or right - Cards move out left/right

Examples:

`html



`

Styling Tips:
`css
/ Parent wrapper - use grid with gap for initial spacing /
.pin-stack-wrapper {
display: grid;
gap: 2rem; / Gap is preserved in animation /
}

/ Cards /
.card {
height: 90vh; / Or any height you want /
border-radius: 1rem;
padding: 2rem;
}
`

Important Notes:
- Parent is automatically converted to display: grid during animation
- Children are positioned using grid-area: 1 / 1 / 2 / 2 to overlap
- Initial row-gap from CSS is respected in animation calculations
- Use aa-scroll-end with sufficient distance (e.g., +=1000 or +=100%) for smooth reveals
- Out-animations are NOT applied to the last card (it has no card appearing after it)
- You can mix and match any in-animation with any out-animation
- Inner animations are automatically triggered when cards become active
- Important: aa-children animations inside a child won't work

---

2. Hover Animations

Interactive hover effects with sophisticated animations and state management. Add aa-hover to an element to get started.

Setup: gsapFeatures: ['hover']

$3

#### Text Animations
Available Animations:
- Slide: text-slide-[direction] where [direction] = up, down, left, right
- Fade: text-fade-[direction] where [direction] = up, down, left, right

Required Element Tags:
- aa-hover-text - Marks the text element to animate

Requirements:
- Parent wrapper with position: relative and overflow: hidden
- Use aa-split to define text splitting method
- Add -reverse suffix for exit animation (e.g., text-slide-up-reverse)

#### Background Animations
Available Animations:
- Circle: bg-circle - Expands circle from hover point
- Direction Control: Include direction in animation name (e.g., bg-circle-vertical)
- Options: all (default), vertical, horizontal, top, bottom, left, right
- Curve: bg-curve - Animates SVG path for wave effects
- Direction Control: Include direction in animation name (e.g., bg-curve-up, bg-curve-horizontal)
- Options: all (default), vertical, horizontal, top, bottom, left, right
- Block: bg-block - Slides a rectangular div in/out based on mouse direction
- Direction Control: Include direction in animation name (e.g., bg-block-vertical, bg-block-horizontal)
- Options: all (default), vertical, horizontal, top, bottom, left, right
- The bg div element needs to be positioned absolutely, cover fully and have the proper z-index; you can set it to visibility:hidden in webflow.
- Expand: bg-expand - Expands shape to fill element

Required Element Tags:
- aa-hover-bg - Marks the background element (SVG or div)
- aa-hover-content - Optional, marks content to position above background

Background Options:
- Add -reverse suffix for exit animation (e.g., bg-expand-reverse)

#### Icon Animations
Available Animations:
- Directional: icon-[direction] where [direction] = right, left, up, down, up-right, up-left, down-right, down-left

Required Element Tags:
- aa-hover-icon - Marks the icon element (usually SVG)

Icon Options:
- Add -reverse suffix for exit animation (e.g., icon-right-reverse)

$3

Use the & operator to combine multiple hover effects:

`html


Learn More






Multi-Effect Button






`

$3

Add color changes to any hover animation using the unified aa-color attribute on child elements.

Unified Color Attribute:
- aa-color="text:#hex" - Changes text color on hover
- aa-color="bg:#hex" - Changes background color on hover
- aa-color="bg:#hex text:#hex" - Changes multiple properties
- aa-color="bg:#hex text:#hex border:#hex" - All three properties

How it works:
- Apply aa-color to child elements within the hover container
- Only properties defined in aa-color will be animated
- Original colors are automatically stored and restored on mouse leave

$3

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-hover | Animation type(s) | - | Hover animation(s), combine with & |
| aa-duration | Number (seconds) | 0.3 | Animation duration |
| aa-delay | Number (seconds) | 0 | Animation delay |
| aa-split | words, chars, lines | words | Text splitting method |
| aa-stagger | Number (seconds) | 0.03 | Stagger between text elements |
| aa-distance | Number (seconds) | 0.1 | Delay between original and clone text |
| aa-color | text:#hex bg:#hex border:#hex | - | Color changes on hover (on child elements) |

$3

#### Text Slide Animation
`html



#### Circle Background Animation
`html

Circle Button




`

#### Wave Background Animation
`html


Horizontal Wave






Bottom Wave Only




`

#### Block Background Animation
`html

Sliding Block


#### Expand Background Animation
`html


#### Icon Animation
`html

Learn More




`

#### Advanced Combined Animation
`html
aa-split="chars"
aa-stagger="0.01"
aa-duration="0.6">


Multi-Effect Button

class="absolute inset-0 scale-0">

`

#### Character-by-Character Text Animation
`html


Character Animation

#### Text Animations
`css
.text-hover-wrapper {
position: relative;
overflow: hidden;
}

/ For fade effects, add padding to make room /
.text-fade-wrapper {
padding: 0.5em;
}
`

#### Background Animations
`css
.hover-element {
position: relative;
}

[aa-hover-bg] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

[aa-hover-content] {
position: relative;
z-index: 1;
}
`

---

3. Interactive Components

$3

Infinite scrolling, snapping, and static slider animations.

Setup: gsapFeatures: ['slider']

Initialization:
Add aa-slider to the wrapper that contains the slider elements. Optionally, add the below features to the attribute.

Feature Detection:
The slider system detects features by checking for keywords in the type:
- loop - Creates continuous looping animation
- autoplay - Enables autoplay with snapping between slides (legacy term: snap)
- hover - Pauses autoplay on hover (only works with autoplay type)
- draggable - Enables drag/swipe functionality
- center - Centers the active slide
- reverse - Reverses the animation direction
- vertical - Creates vertical slider instead of horizontal
- none - Useful in combination with the | separator for responsive deactivation, e.g. aa-slider=none|draggable-center

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-slider | Slider type | - | Slider animation type |
| aa-duration | Number (seconds) | 20 (loop), 0.8 (autoplay) | Speed/duration |
| aa-delay | Number (seconds) | 3 | Pause between snaps |
| aa-slider-item | - | - | Marks slider items |
| aa-slider-prev | - | - | Previous button |
| aa-slider-next | - | - | Next button |
| aa-slider-current | - | - | Current slide number |
| aa-slider-total | - | - | Total slide count |
| aa-slider-button | - | - | Pagination button |
| aa-slider-target | Slider ID | - | Target slider for external controls |
| aa-slider-progress | width, height, circle | - | Progress indicator type |

CSS Requirements:
- Container needs display: flex and gap set for spacing between slides
- Items need fixed width (percentage or pixels) and flex-shrink: 0
- Important: The slider items cannot have 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 the slider items themselves

Active Classes:
The slider automatically adds/removes the following classes:
- Slider items: is-active class is added to the currently visible slide
- Navigation buttons: is-active class is added to the corresponding pagination button
- ARIA attributes: aria-hidden="false" for active slide, aria-selected="true" for active button

`css
.slider-container {
display: flex;
gap: 2rem; / This gap is automatically detected and used for spacing /
}

.slider-item {
width: 300px; / Fixed width required /
flex-shrink: 0; / Prevents items from shrinking /
}

/ Apply styling to nested elements, not the slider item directly /
.slider-item-content {
border: 1px solid #ccc;
padding: 2rem;
border-radius: 8px;
}

/ Style active states /
.slider-item.is-active .slider-item-content {
border-color: #007bff;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.slider-button.is-active {
background-color: #007bff;
color: white;
}
`

Mobile Variants:
Use the | separator to define different slider behavior for desktop and mobile:
`html



Examples:
`html



Setup: gsapFeatures: ['accordion']

Note: Opening/closing is animated via CSS transition of the grid fr unit, while inner content animations are handled by GSAP using event-based triggering.

#### Component Structure

Main Component Attributes:
- aa-accordion - Basic accordion (only one open at a time)
- aa-accordion="single" - Basic accordion (only one open at a time + open one cannot be closed)
- aa-accordion="multi" - Multi accordion (multiple can be open)
- aa-accordion="autoplay" - Autoplay accordion with progress indicators
- Add aa-duration to define how long one autoplay cycle takes
- Optionally add aa-accordion-progress to another element to visualize the progress; accepts values width, height, circle
- aa-accordion="scroll" - Scroll-driven sticky accordion
- Accordion becomes pinned when scrolled into view
- Opens accordions sequentially as user scrolls
- Progress bars fill based on scroll position
- Toggle elements are not clickable (controlled by scroll only)
- Use aa-distance to define scroll distance per accordion in viewport height units (default: 100, meaning 100vh)
- Use aa-scroll-start to control when pinning starts (default: "top 20%")
- Use aa-scrub to control scroll scrubbing behavior (default: true; add number to set scrubbing delay)
- Use aa-accordion-initial on the first accordion to have it open before reaching the trigger

Element Attributes:
- aa-accordion-toggle=ID - Marks the clickable toggle element (ID optional - auto-generated if not provided)
- aa-accordion-content=ID - Marks the expandable content element (ID optional - auto-generated if not provided)
- aa-accordion-visual=ID - Marks connected visual content element (ID optional - auto-generated if not provided)
- aa-accordion-wrapper - Optional wrapper for toggle and content (enables simplified styling)
- aa-accordion-initial - On load, activates this toggle, opens content, shows visual

Auto-Generated IDs:
When no IDs are provided, the accordion system automatically assigns sequential IDs:
- First toggle/content pair: accordion-0
- Second toggle/content pair: accordion-1
- Third toggle/content pair: accordion-2
- And so on...

Manual IDs take precedence over auto-generated ones.

#### Inner Animations

Simplified Approach: All inner animations now use the standard aa-animate attribute with event-based triggering. The system automatically detects and triggers animations when accordions open/close.

Available Animations:
- All Scroll Animations: Fade, slide, scale, appear, reveal, grow, counter, text animations

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-accordion | Accordion type | - | Accordion behavior |
| aa-duration | Number (seconds) | 5 (autoplay) | Duration for autoplay |
| aa-distance | Number (vh units) | 30 (scroll) | Scroll distance per accordion (scroll accordion only) |
| aa-ease | Easing function | power4.out | Animation easing |
| aa-delay | Number (seconds) | 0.3 | Delay before inner animations |
| aa-scroll-start | Position | top 20% (scroll) | When pinning starts (scroll accordion) |
| aa-accordion-toggle | ID | - | Toggle element |
| aa-accordion-content | ID | - | Content element |
| aa-accordion-visual | ID | - | Connected visual |
| aa-accordion-initial | - | - | Initially open |
| aa-accordion-progress | width, height, circle | - | Progress type |

Examples:

#### Basic Accordion
`html


#### Autoplay with Progress
`html


#### Connected Visual Elements
`html


#### Circular Progress
`html


Content Structure:
`css
.content-inner {
height: 100000%;
display: flex;
position: relative;
overflow: hidden;
}

.content-wrapper {
/ Contains actual content and provides padding /
}
`

Circular Progress:
`css
[aa-accordion-progress="circle"] {
stroke-dasharray: 10000;
stroke-dashoffset: 10000; / Empty circle initially /
}
.autoplay-progress svg {
transform: rotate(-90deg); / Start from top /
}
`

#### Accessibility Features

- Keyboard Navigation: Tab to focus, Enter/Space to toggle
- ARIA Attributes: Automatic aria-expanded, aria-controls, aria-labelledby
- Screen Reader Support: Proper announcements and state changes
- Focus Management: Maintains focus during interactions

#### Optional Wrapper Pattern

For simplified styling and state management (especially useful for FAQ-style accordions with hover states), wrap toggle and content in an aa-accordion-wrapper element:

`html


Use status attributes for styling:
`css
/ Standard approach /
[aa-accordion-toggle][aa-accordion-status="active"] {
/ Active toggle styles /
}

/ With wrapper pattern /
[aa-accordion-wrapper][aa-accordion-status="active"] {
/ Active wrapper styles /
}

[aa-accordion-wrapper]:hover {
/ Hover entire accordion item /
}
`

---

$3

Scrolling text and content animations.

Setup: gsapFeatures: ['marquee']

Available Types:
- Basic: left, right
- Interactive: left-hover, right-hover, left-switch, right-switch
- Paused: left-paused, right-paused (scroll-driven only)

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-marquee | Marquee type | - | Marquee animation |
| aa-duration | Number (seconds) | 15 | Animation duration |
| aa-marquee-scroller | Number | 0 | Scroll speed multiplier |
| aa-marquee-items | Number | 2 | Number of duplicates |
| aa-scrub | empty or number | - | Scroll-driven (for paused) |

CSS Requirements:
- Container with aa-marquee-items needs display: flex
- Important: Use margin-right (or margin-left) on items for spacing, NOT gap
- Items should not have flex-shrink: 0 (unlike sliders)

`css
[aa-marquee-items] {
display: flex;
/ Do NOT use gap - use margin on items instead /
}

[aa-marquee-items] .item {
margin-right: 2rem; / Use margin for spacing /
/ Do NOT use flex-shrink: 0 /
}
`

Examples:
`html



Setup: gsapFeatures: ['modal']

#### Basic Structure

- Trigger: Use aa-modal-target="unique-modal-name" on any element that should open a modal
- Modal Container: Wrap all modals in a container with aa-modal-group (add unique identifier for multiple groups)
- Modal Element: Each modal needs a unique aa-modal-name="unique-modal-name" attribute
- Close Elements: Any element with aa-modal-close will close the modal when clicked (buttons, backdrop, etc.)
- Scrollable Content: Apply data-lenis-prevent to content areas that need independent scrolling

#### Inner Animations

Simplified Approach: All inner animations now use the standard aa-animate attribute with event-based triggering. The system automatically detects and triggers animations when modals open/close.

Available Animations:
- All Scroll Animations: Fade, slide, scale, appear, reveal, grow, counter, text animations


Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-modal-group | Optional ID | - | Modal container (for multiple groups) |
| aa-modal-target | Modal name | - | Opens specified modal |
| aa-modal-name | Unique name | - | Modal identifier |
| aa-modal-close | - | - | Closes modal when clicked |
| aa-duration | Number (seconds) | 0.5 | Animation duration |
| aa-ease | Easing function | power2.out | Animation easing |

Examples:
`html

Open Modal

×

Modal Title

Modal content with animations

Text with word-by-word animation

- Lenis Integration: Use data-lenis-prevent on modal content to allow independent scrolling
- Accessibility: Built-in keyboard navigation (Escape to close) and focus management
- Multiple Groups: Use aa-modal-group="group-name" for organizing different modal groups
- Custom Animations: Define starting positions in CSS for custom-* animations

---

$3

Scroll-responsive navigation with animations and dynamic styling.

Setup: gsapFeatures: ['nav']

#### Nav Hide/Show & Class Change

Available Types:
- Hide: hide (hide on scroll down, show on scroll up)
- Change: change (adds is-scrolled class after threshold)
- Combined: hide-change (both effects)
- Threshold: Add number for pixel threshold when to trigger change effect (e.g., change-100, hide-change-50); defaults to 100px

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-nav | Navigation type | - | Navigation behavior |
| aa-duration | Number (seconds) | 0.4 | Animation duration |
| aa-ease | Easing function | back.inOut | Animation easing |
| aa-distance | Number | 1 | Movement multiplier |

Examples:
`html



#### Navigation Tracking with is-current

When using scroll-to functionality with Lenis, AlrdyAnimate automatically tracks which sections are in view and adds the is-current class to corresponding navigation elements.

`html



How it works:
- Triggers when section reaches 50% of viewport
- Automatically adds is-current class to corresponding nav link
- Removes class when section leaves view

CSS Example:
`css
nav a.is-current {
color: #007bff;
font-weight: bold;
}
`

#### Nav Section Classes

Add dynamic classes to your navigation based on which section is currently positioned behind it. Perfect for changing nav colors based on section backgrounds.

Attributes & Defaults:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-nav-section | Class name | - | Class to add to nav when section is behind it |
| aa-scroll-start | ScrollTrigger position | top 0% | When to add the class |
| aa-scroll-end | ScrollTrigger position | bottom 0% | When to remove the class |

How It Works:
- Only one section class is active at a time
- Previous section class is automatically removed before adding new one
- Supports both percentage (5%) and rem units (5rem) in scroll positions
- Works independently from is-scrolled and is-current classes

Examples:
`html



CSS Styling:
`css
/ Default nav state /
nav {
background-color: transparent;
color: #000;
transition: background-color 0.3s ease, color 0.3s ease;
}

/ Nav states based on sections /
nav.nav-dark {
background-color: rgba(255, 255, 255, 0.95);
color: #000;
}

nav.nav-light {
background-color: rgba(0, 0, 0, 0.95);
color: #fff;
}

nav.nav-accent {
background-color: rgba(59, 130, 246, 0.95);
color: #fff;
}
`

#### Nav Indicators (Current + Hover)

Animated indicators that track the active navigation item and follow hover interactions using GSAP's FLIP plugin. Perfect for creating sophisticated navigation highlighting effects.

How It Works:
- Current Indicator: Automatically follows the .is-current class on navigation items
- Hover Indicator: Follows mouse hover, returns to current indicator when mouse leaves nav
- FLIP Animation: Smoothly animates position and size between nav items without distortion

Attributes & Defaults:
| Attribute | Element | Default | Description |
|-----------|---------|---------|-------------|
| aa-nav-current-indicator | Indicator element | - | Tracks active navigation item |
| aa-nav-hover-indicator | Indicator element | - | Follows hover on nav items |
| aa-duration | Indicator element | 0.4 | Animation duration |
| aa-ease | Indicator element | power2.out | Animation easing |
| aa-scroll-target | Nav links | - | Required on nav items for tracking |

Examples:
`html



CSS Requirements:
`css

/ Current indicator (darker, tracks active section) /
[aa-nav-current-indicator] {
position: absolute;
background: rgba(0, 0, 0, 0.15);
border-radius: 0.5rem;
pointer-events: none;
z-index: 1;
opacity: 0; / Hidden until initialized /
}

/ Hover indicator (lighter, follows mouse) /
[aa-nav-hover-indicator] {
position: absolute;
background: rgba(0, 0, 0, 0.08);
border-radius: 0.5rem;
pointer-events: none;
z-index: 0;
opacity: 0; / Hidden until initialized /
}
`

---

Advanced Features

$3

Combine aa-load (CSS) with aa-animate (GSAP) for above the fold loading animations. If page load speed is too slow, animations will fallback to CSS.

How to Use:
`html

`

How It Works:
- Hybrid element hidden initially (prevents FOUC)
- If JS loads within grace period (< 0.35s): GSAP animation plays
- Otherwise CSS animation plays as fallback after CSS load delay variable
- Prevents double animation - only one system animates per element

Configuration:


`css
/ In your custom CSS or Webflow's custom code /
:root {
--load-base-delay: 0.4s; / adjust based on your JS load time /
}
`

`javascript
AlrdyAnimate.init({
loadGracePeriod: 0.35, // Should be slightly earlier than the --load-base-delay
gsapFeatures: ['appear', 'text'],
// ... other options
});
`

Recommendations:
- Use pure aa-load for critical above-the-fold content (hero, headlines, CTAs)
- Use hybrid for below-the-fold content where you want GSAP features with CSS fallback
- Match animation styles (e.g., aa-load="fade-up" with aa-animate="appear-up")
- Test with throttled network (DevTools → Slow 3G) to verify fallback behavior

Performance Notes:
- Pure aa-load: 0ms to animate - no hiding, no waiting for JS
- Hybrid elements: Hidden until JS ready or grace period expires
- Body attributes: aa-js-ready (JS loaded), aa-load-grace-expired (CSS owns hybrid elements)

$3

`javascript
AlrdyAnimate.init({
templates: {
theme: 'blur', // Use predefined theme
custom: {
'hero-title': {
animationType: 'text-slide-up-clip',
split: 'lines',
stagger: 0.1,
duration: 0.8,
ease: 'back.out'
},
'card-item': {
animationType: 'fade-up',
duration: 0.6,
delay: 0.2
}
}
}
});
`

`html



Automatically animated

Available Themes:
- blur - Blur-based text animations
- tilt - Tilt and slide animations

$3

Prevent Smooth Scrolling:
`html


Programmatic Control:
`javascript
// Stop/start scrolling
window.lenis.stop();
window.lenis.start();

// Scroll to element
window.lenis.scrollTo('#target', {
duration: 1.5,
easing: t => 1 - Math.pow(1 - t, 3)
});
`

$3

Control CSS animation playback based on element visibility.

`html



How it works:
- Adds aa-toggle-playstate to parent element
- All first-level children with animations will be controlled
- animation-play-state: running when parent is in view
- animation-play-state: paused when parent is out of view
- Only affects CSS animations (not GSAP animations)

$3

Replace default Webflow form submit buttons with custom styled buttons while maintaining form functionality. The custom logic only works if form data is sent to a 3rd party.

Setup: Automatically enabled with AlrdyAnimate initialization

Available Attributes:
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| aa-submit-button | - | - | Enables custom submit button |
| aa-submit-loading-duration | Number (seconds) | 0.3 | How long to show loading state |
| aa-submit-success-duration | Number (seconds) | 1.2 | How long to show success state |
| aa-submit-error-duration | Number (seconds) | 1.2 | How long to show error state |
| aa-submit-logic | default, custom | default | How to handle form states and messages |
| aa-submit-debug | - | - | Enable detailed console logging for debugging |

CSS Classes Applied:
- Button: is-loading, is-success, is-error
- Form Wrapper (.w-form): is-loading, is-success, is-error
- Success Message (.w-form-done): is-success
- Error Message (.w-form-fail): is-error

Simple Example:
``html