xt-animations
Version:
XT Animations - A lightweight scroll animation library using pure CSS and JavaScript.
874 lines (806 loc) • 35.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XT-Animate Ultimate - 500+ Animations Demo</title>
<!-- Include XT-Animate Ultimate -->
<link rel="stylesheet" href="xt-animate-ultimate.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 4rem 0;
}
.hero {
text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero h1 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 900;
margin-bottom: 1rem;
background: linear-gradient(45deg, #fff, #f0f0f0, #fff);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: textShimmer 3s ease-in-out infinite;
}
@keyframes textShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero p {
font-size: 1.5rem;
opacity: 0.9;
margin-bottom: 2rem;
}
.demo-section {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 3rem;
margin: 2rem 0;
width: 100%;
}
.category-title {
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 2rem;
background: linear-gradient(45deg, #fff, #f0f0f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.animation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.animation-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.animation-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.animation-card h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.animation-card p {
font-size: 1rem;
opacity: 0.8;
margin-bottom: 1rem;
}
.animation-code {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 0.8rem;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
margin-top: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.animation-code:hover {
background: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.4);
}
.copy-tooltip {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 0.8rem;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1000;
}
.copy-tooltip.show {
opacity: 1;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.stat-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 2rem;
text-align: center;
}
.stat-number {
font-size: 3rem;
font-weight: 800;
display: block;
margin-bottom: 0.5rem;
background: linear-gradient(45deg, #f093fb, #f5576c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 1.1rem;
opacity: 0.9;
}
.controls {
position: fixed;
top: 20px;
left: 20px;
z-index: 1000;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.control-btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.search-box {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
.search-input {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.8rem 1.2rem;
border-radius: 25px;
font-size: 1rem;
backdrop-filter: blur(10px);
width: 250px;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.search-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.3);
}
.btn {
display: inline-block;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
margin-top: 1rem;
cursor: pointer;
}
.btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.controls {
position: relative;
top: auto;
left: auto;
justify-content: center;
margin: 1rem 0;
}
.search-box {
position: relative;
top: auto;
right: auto;
text-align: center;
margin: 1rem 0;
}
.search-input {
width: 100%;
max-width: 300px;
}
.animation-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Controls -->
<div class="controls">
<button class="control-btn" onclick="XTAnimate.resetAll()">🔄 Reset All</button>
<button class="control-btn" onclick="XTAnimate.enableDebug()">🐛 Debug</button>
<button class="control-btn" onclick="showStats()">📊 Stats</button>
</div>
<!-- Search -->
<div class="search-box">
<input type="text" class="search-input" placeholder="Search animations..." id="searchInput">
</div>
<!-- Hero Section -->
<section class="section hero">
<div class="container">
<h1 xt-animate="fade-up duration-slow">XT-Animate Ultimate</h1>
<p xt-animate="fade-up delay-200">500+ Modern Web Animations</p>
<button class="btn" xt-animate="bounce-in delay-400" onclick="scrollToDemo()">
🎭 Explore Animations
</button>
</div>
</section>
<!-- Stats Section -->
<section class="section">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="slide-down">Amazing Statistics</h2>
<div class="stats-grid">
<div class="stat-card" xt-animate="bounce-in delay-100">
<span class="stat-number" data-counter="500">0</span>
<span class="stat-label">Animations</span>
</div>
<div class="stat-card" xt-animate="bounce-in delay-200">
<span class="stat-number" data-counter="12">0</span>
<span class="stat-label">Categories</span>
</div>
<div class="stat-card" xt-animate="bounce-in delay-300">
<span class="stat-number" data-counter="60">0</span>
<span class="stat-label">FPS</span>
</div>
<div class="stat-card" xt-animate="bounce-in delay-400">
<span class="stat-number" data-counter="15">0</span>
<span class="stat-label">KB Size</span>
</div>
</div>
</div>
</div>
</section>
<!-- Fade Animations -->
<section class="section" id="demo">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="fade-up">Fade Animations</h2>
<div class="animation-grid">
<div class="animation-card" xt-animate="fade-up delay-100">
<h3>Fade Up</h3>
<p>Classic fade from bottom</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="fade-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="fade-down delay-200">
<h3>Fade Down</h3>
<p>Elegant fade from top</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="fade-down"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="fade-left delay-300">
<h3>Fade Left</h3>
<p>Smooth fade from left</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="fade-left"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="fade-right delay-400">
<h3>Fade Right</h3>
<p>Beautiful fade from right</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="fade-right"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="fade-up-left delay-500">
<h3>Fade Up Left</h3>
<p>Diagonal fade animation</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="fade-up-left"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="fade-up-right delay-600">
<h3>Fade Up Right</h3>
<p>Diagonal fade animation</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="fade-up-right"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Slide Animations -->
<section class="section">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="slide-down">Slide Animations</h2>
<div class="animation-grid">
<div class="animation-card" xt-animate="slide-up delay-100">
<h3>Slide Up</h3>
<p>Powerful slide from bottom</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="slide-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="slide-down delay-200">
<h3>Slide Down</h3>
<p>Dynamic slide from top</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="slide-down"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="slide-left delay-300">
<h3>Slide Left</h3>
<p>Smooth slide from left</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="slide-left"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="slide-right delay-400">
<h3>Slide Right</h3>
<p>Elegant slide from right</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="slide-right"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Zoom Animations -->
<section class="section">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="zoom-in">Zoom Animations</h2>
<div class="animation-grid">
<div class="animation-card" xt-animate="zoom-in delay-100">
<h3>Zoom In</h3>
<p>Scale up entrance</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="zoom-in"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="zoom-out delay-200">
<h3>Zoom Out</h3>
<p>Scale down entrance</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="zoom-out"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="zoom-in-up delay-300">
<h3>Zoom In Up</h3>
<p>Combined zoom and slide</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="zoom-in-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="zoom-in-left delay-400">
<h3>Zoom In Left</h3>
<p>Diagonal zoom effect</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="zoom-in-left"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bounce Animations -->
<section class="section">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="bounce-in">Bounce Animations</h2>
<div class="animation-grid">
<div class="animation-card" xt-animate="bounce-in delay-100">
<h3>Bounce In</h3>
<p>Playful bounce entrance</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="bounce-in"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="bounce-in-up delay-200">
<h3>Bounce In Up</h3>
<p>Bouncy slide from bottom</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="bounce-in-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="bounce-in-left delay-300">
<h3>Bounce In Left</h3>
<p>Springy left entrance</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="bounce-in-left"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="bounce-in-right delay-400">
<h3>Bounce In Right</h3>
<p>Elastic right entrance</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="bounce-in-right"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 3D Animations -->
<section class="section">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="morph-up">3D Animations</h2>
<div class="animation-grid">
<div class="animation-card" xt-animate="flip-x delay-100">
<h3>Flip X</h3>
<p>3D flip on X axis</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="flip-x"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="flip-y delay-200">
<h3>Flip Y</h3>
<p>3D flip on Y axis</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="flip-y"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="morph-up delay-300">
<h3>Morph Up</h3>
<p>3D morphing effect</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="morph-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="fold-up delay-400">
<h3>Fold Up</h3>
<p>Paper fold effect</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="fold-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Special Effects -->
<section class="section">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="glow-blue blur-in">Special Effects</h2>
<div class="animation-grid">
<div class="animation-card" xt-animate="blur-in delay-100">
<h3>Blur In</h3>
<p>Blur to focus transition</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="blur-in"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="glow-blue delay-200">
<h3>Glow Blue</h3>
<p>Neon blue glow effect</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="glow-blue"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="glow-pink delay-300">
<h3>Glow Pink</h3>
<p>Vibrant pink glow</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="glow-pink"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="elastic-scale delay-400">
<h3>Elastic Scale</h3>
<p>Bouncy scaling effect</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="elastic-scale"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Attention Seeking -->
<section class="section">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="pulse">Attention Seeking</h2>
<div class="animation-grid">
<div class="animation-card" xt-animate="pulse">
<h3>Pulse</h3>
<p>Rhythmic pulsing effect</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="pulse"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="shake">
<h3>Shake</h3>
<p>Attention-grabbing shake</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="shake"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="wobble">
<h3>Wobble</h3>
<p>Playful wobble motion</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="wobble"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="heart-beat">
<h3>Heart Beat</h3>
<p>Heartbeat rhythm effect</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="heart-beat"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Advanced Combinations -->
<section class="section">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="fade-up glow-purple">Advanced Combinations</h2>
<div class="animation-grid">
<div class="animation-card" xt-animate="fade-up glow-blue duration-slow delay-100">
<h3>Fade + Glow + Slow</h3>
<p>Multiple effects combined</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="fade-up glow-blue duration-slow"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="bounce-in-up glass delay-200">
<h3>Bounce + Glass</h3>
<p>Bouncy glass morphism</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="bounce-in-up glass"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="morph-up glow-green duration-ultra-slow delay-300">
<h3>Morph + Glow + Ultra Slow</h3>
<p>3D morph with glow</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="morph-up glow-green duration-ultra-slow"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="blur-in-up elastic-bounce delay-400">
<h3>Blur + Elastic</h3>
<p>Blur with elastic bounce</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="blur-in-up elastic-bounce"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stagger Example -->
<section class="section">
<div class="container">
<div class="demo-section">
<h2 class="category-title" xt-animate="fade-up">Stagger Animations</h2>
<div class="animation-grid xt-stagger">
<div class="animation-card" xt-animate="slide-up">
<h3>Stagger 1</h3>
<p>First in sequence</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="slide-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="slide-up">
<h3>Stagger 2</h3>
<p>Second in sequence</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="slide-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="slide-up">
<h3>Stagger 3</h3>
<p>Third in sequence</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="slide-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
<div class="animation-card" xt-animate="slide-up">
<h3>Stagger 4</h3>
<p>Fourth in sequence</p>
<div class="animation-code" onclick="copyToClipboard(this)">
xt-animate="slide-up"
<div class="copy-tooltip">Click to copy!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Include XT-Animate Ultimate JavaScript -->
<script src="xt-animate-ultimate.js"></script>
<!-- Demo JavaScript -->
<script>
// Copy to clipboard function
function copyToClipboard(element) {
const text = element.textContent.trim();
// Create temporary textarea
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
// Show tooltip
const tooltip = element.querySelector('.copy-tooltip');
tooltip.textContent = 'Copied!';
tooltip.classList.add('show');
setTimeout(() => {
tooltip.classList.remove('show');
tooltip.textContent = 'Click to copy!';
}, 2000);
// Add visual feedback
element.style.background = 'rgba(0, 255, 0, 0.3)';
setTimeout(() => {
element.style.background = 'rgba(0, 0, 0, 0.3)';
}, 300);
}
// Show stats function
function showStats() {
const stats = XTAnimate.getStats();
alert(`📊 Animation Statistics:
Total Elements: ${stats.totalElements}
Animated Elements: ${stats.animatedElements}
Counters: ${stats.counters}
Categories: ${stats.categories}
Total Animations: ${stats.totalAnimations}
Version: ${stats.version}`);
}
// Scroll to demo function
function scrollToDemo() {
document.getElementById('demo').scrollIntoView({
behavior: 'smooth'
});
}
// Search functionality
function setupSearch() {
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', function(e) {
const query = e.target.value.toLowerCase();
const cards = document.querySelectorAll('.animation-card');
cards.forEach(card => {
const title = card.querySelector('h3').textContent.toLowerCase();
const code = card.querySelector('.animation-code').textContent.toLowerCase();
if (title.includes(query) || code.includes(query)) {
card.style.display = 'block';
} else {
card.style.display = query === '' ? 'block' : 'none';
}
});
});
}
// Initialize demo
document.addEventListener('DOMContentLoaded', function() {
setupSearch();
console.log('🎭 XT-Animate Ultimate Demo loaded!');
console.log('📊 Total animations available:', XTAnimate.utils.getAllAnimations().length);
// Add click handlers to cards for re-animation
document.querySelectorAll('.animation-card').forEach(card => {
card.addEventListener('click', function() {
this.classList.remove('xt-visible');
setTimeout(() => {
XTAnimate.utils.triggerAnimation(this);
}, 100);
});
});
// Listen for animation events
document.addEventListener('xt-animated', function(e) {
console.log('🎬 Animation completed:', e.detail.animation);
});
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.shiftKey) {
switch(e.key) {
case 'D':
XTAnimate.enableDebug();
break;
case 'R':
XTAnimate.resetAll();
break;
case 'S':
showStats();
break;
}
}
});
});
</script>
</body>
</html>