🎨 XT-Animate Ultimate - Full Demo & Documentation

This is the complete, all-in-one demo and comprehensive documentation for the XT-Animate Ultimate library. It showcases all 700+ animations, advanced text effects, sequential animations, a dynamic text carousel, a full-fledged slider, and AOS-like scroll triggering. This index.html is designed to be a pure HTML file, linking only to external CSS and JavaScript.

✨ Features

• 700+ Animations across 15+ categories, each with a live preview and its corresponding xt-animate attribute.
• Dynamic Text Carousel: A dedicated section demonstrating sequential, blur-to-clear, and slide animations for text, with configurable options and scroll triggering.
• Modern XTSlider (Swiper-like Card Carousel): A robust, responsive, infinitely looping card carousel with autoplay, navigation buttons, and pagination dots. It displays multiple cards at once and smoothly slides them one by one, with each card animating using XT-Animate effects as it enters the view.
• Counter Animations with elastic easing.
• Text Reveal Effects (word-by-word, character-by-character, blur-to-show).
• Sequence Animations (chain multiple animations with custom delays).
• 3D Transformations with perspective.
• Special Effects (glass, matrix).
• Performance Monitoring with a debug panel (toggleable via keyboard shortcut).
• Stagger Support for sequential timing.
• Advanced Scroll Triggers (AOS-like):
  • data-xt-offset: Define a custom offset from the viewport edge for animation triggering.
  • data-xt-once="true": Make animations play only once.
• Responsive Design with mobile optimization.
• Accessibility Support (respects reduced motion).

🚀 Quick Start

1. Download the files

Download the following three files and place them in the same directory:

• xt-animate-ultimate.css
• xt-animate-ultimate.js
• index.html
• README.md (this file)

2. Open index.html

Simply open the index.html file in your web browser. Scroll through the page to see all animations in action. Click on any animation card to re-trigger its animation.

📚 Usage & API

XT-Animate Ultimate is designed to be easy to use with HTML attributes, but also provides a JavaScript API for more control.

Basic Animation (xt-animate)

Apply animations by adding the xt-animate attribute to any HTML element.

```html

You can combine multiple animation classes (e.g., fade-up, delay-200, duration-slow, ease-elastic).

Animation Categories

The library includes over 700 animations across these categories:

• Fade Animations: fade-up, fade-down, fade-left, fade-right, fade-in-big, fade-in-rotate, etc.
• Slide Animations: slide-up, slide-down, slide-left, slide-right, slide-up-big, slide-in-rotate-left, etc.
• Zoom/Scale Animations: zoom-in, zoom-out, scale-up, scale-x, zoom-in-up, etc.
• Rotate Animations: rotate-in, rotate-left, rotate-360, rotate-x, rotate-in-up-left, etc.
• 3D Flip Animations: flip-x, flip-y, flip-card-left, flip-diagonal, etc.
• 3D Morph Animations: morph-up, morph-left, cube-in, fold-up, etc.
• Bounce Animations: bounce-in, bounce-in-up, bounce-scale, bounce-rotate, etc.
• Elastic Animations: elastic-in, elastic-up, elastic-scale, elastic-jello, elastic-tada, etc.
• Blur Effects: blur-in, blur-in-up, blur-in-left, etc.
• Glow Effects: glow, glow-blue, glow-neon, glow-rainbow, etc.
• Attention Seeking Animations: pulse, shake, wobble, flash, rubber-band, jello, heart-beat.
• Special Effects: glass, matrix-in.

Timing Controls

Control animation speed and delay:

• Duration: duration-ultra-fast (0.2s), duration-fast (0.4s), duration-normal (0.8s - default), duration-slow (1.2s), duration-ultra-slow (2s), duration-snail (3s).
• Delay: delay-50 (0.05s) up to delay-2000 (2s).

Easing Controls

Customize animation timing functions:

• ease-linear, ease-in, ease-out, ease-in-out, ease-back, ease-elastic, ease-bounce, ease-smooth (default).

Scroll Triggers (AOS-like)

All xt-animate elements are scroll-triggered by default using IntersectionObserver.

• Custom Offset (data-xt-offset): Specify a custom pixel offset from the bottom of the viewport for the animation to trigger. ```html
• Play Once (data-xt-once): Make an animation play only once when it first enters the viewport. ```html

Counter Animations (data-counter)

Animate numbers from 0 to a target value.

```html 0 ```

• data-counter: The target number.
• data-duration: (Optional) Duration of the counter animation in milliseconds (default: 2000ms).

Text Effects

Apply dynamic effects to text content.

• Reveal Word by Word (xt-text-reveal-word): ```html
• Reveal Character by Character (xt-text-reveal-char): ```html
• Blur to Show Text (xt-text-blur-in): ```html

Sequence Animations (data-xt-sequence)

Chain multiple animations together with custom delays between each step.

```html

The data-xt-sequence value is a comma-separated list of animation-class,delay-in-ms.

Modern XTSlider (Swiper-like Card Carousel)

The XTSlider class provides a full-featured content slider that can display multiple cards and slide them smoothly.

```html

• Structure:

  • .xt-slider-container: The main wrapper for the slider.
  • .xt-slider-wrapper: Contains all individual slides (.xt-slide).
  • .xt-slide: Each individual card/slide. Apply xt-animate attributes here for card transitions.
  • .xt-slider-prev, .xt-slider-next: Navigation buttons.
  • .xt-slider-pagination: Container for pagination dots (dots are generated automatically).

• Attributes (data-xt-slider-*):

  • data-xt-slider-autoplay: true or false (default: false). Enables/disables autoplay.
  • data-xt-slider-autoplay-delay: Number in milliseconds (default: 3000). Delay between slide changes during autoplay.
  • data-xt-slider-loop: true or false (default: false). Enables/disables infinite looping.
  • data-xt-slider-visible-slides: Number (default: 1). How many slides are visible in the container at once.
  • data-xt-slider-move-slides: Number (default: 1). How many slides to advance/retreat per navigation click or autoplay step.
  • data-xt-slider-animation: xt-animate classes for individual slide transitions (default: "fade-in duration-slow").
  • data-xt-slider-margin: A CSS rootMargin string for the IntersectionObserver that triggers the slider's autoplay (default: "0px 0px -50px 0px").

JavaScript API (window.XTAnimate)

The library exposes a global XTAnimate object for programmatic control.

• XTAnimate.animate(elementOrSelector): Triggers the animation on a specific element or elements.
• XTAnimate.reset(elementOrSelector): Resets an element's animation state, making it ready to animate again.
• XTAnimate.resetAll(): Resets all animations on the page, including counters, carousels, and sliders.
• XTAnimate.enableDebug(): Activates the debug panel.
• XTAnimate.disableDebug(): Deactivates the debug panel.
• XTAnimate.getStats(): Returns an object with animation statistics.
• XTAnimate.destroy(): Cleans up all observers and elements, effectively stopping the library.
• XTAnimate.utils.getRandomAnimation(category): Get a random animation class from a specified category.
• XTAnimate.utils.getCategoryAnimations(category): Get all animation classes for a specified category.
• XTAnimate.utils.getAllAnimations(): Get all available animation classes.
• XTAnimate.utils.triggerAnimation(element): Programmatically re-triggers an animation on a given element.
• XTAnimate.utils.setRootMargin(marginString): Globally sets the rootMargin for the IntersectionObserver.

⌨️ Keyboard Shortcuts (Global XT-Animate)

• Ctrl+Shift+D - Toggle debug panel
• Ctrl+Shift+R - Reset all animations (including the carousel and sliders)
• Ctrl+Shift+S - Show statistics alert

🌐 CDN and NPM Support

• CDN: To use this library via CDN, you would host the xt-animate-ultimate.css and xt-animate-ultimate.js files on a CDN service. Then, link to them in your HTML <head> section as shown in the index.html demo.
• NPM: Packaging this custom library as an NPM module would involve creating a package.json, setting up build processes (e.g., using Rollup or Webpack), and publishing to the NPM registry. While not included in this single-file demo, it's a feasible next step for larger projects requiring module imports.

📊 Performance

The library is designed for high performance:

• Lightweight: The combined CSS and JS are minimal in size.
• Optimized: Utilizes the IntersectionObserver API for efficient scroll detection, only animating elements when they are in view.
• Hardware Accelerated: Leverages CSS transform and opacity properties for GPU-powered animations.
• Smooth 60 FPS: Aims for fluid animations.

♿ Accessibility

• Respects prefers-reduced-motion: Animations are disabled or simplified for users who prefer reduced motion.
• Semantic HTML: Uses appropriate HTML elements.

Made with ❤️ for the web animation community

🌟 All animations are 100% working and tested! 🎭 700+ animations ready to use 📱 Mobile optimized and responsive ⚡ High performance with Intersection Observer

Happy animating! 🚀