my-animation-lib
Version:
A powerful animation library combining Three.js, GSAP, custom scroll triggers, and advanced effects with MathUtils integration
617 lines (518 loc) • 21.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎨 My Animation Library - Package Test</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 40px;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.header p {
font-size: 1.2rem;
opacity: 0.9;
}
.demo-section {
background: white;
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.demo-section h2 {
color: #667eea;
margin-bottom: 20px;
font-size: 1.8rem;
}
.demo-element {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
margin: 20px;
display: inline-block;
cursor: pointer;
transition: transform 0.3s ease;
}
.demo-element:hover {
transform: scale(1.1);
}
.controls {
margin: 20px 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn:active {
transform: translateY(0);
}
.btn.stop {
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
}
.btn.success {
background: linear-gradient(45deg, #2ecc71, #27ae60);
}
.status {
padding: 10px;
border-radius: 5px;
margin: 10px 0;
font-weight: bold;
}
.status.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.status.info {
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.code-example {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 5px;
padding: 15px;
margin: 15px 0;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
}
.particle-container {
height: 200px;
background: #000;
border-radius: 10px;
position: relative;
overflow: hidden;
margin: 20px 0;
}
.wave-container {
height: 150px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 10px;
position: relative;
overflow: hidden;
margin: 20px 0;
}
.wave-element {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.1);
border-radius: 50%;
transform-origin: center;
}
.math-utils-test {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.math-result {
font-family: 'Courier New', monospace;
background: white;
padding: 10px;
border-radius: 5px;
margin: 5px 0;
border-left: 4px solid #667eea;
}
.package-info {
background: linear-gradient(45deg, #2c3e50, #34495e);
color: white;
padding: 20px;
border-radius: 15px;
margin-bottom: 30px;
}
.package-info h3 {
color: #3498db;
margin-bottom: 15px;
}
.package-info ul {
list-style: none;
padding-left: 0;
}
.package-info li {
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.package-info li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 My Animation Library</h1>
<p>Comprehensive Package Test & Demo</p>
</div>
<div class="package-info">
<h3>📦 Package Information</h3>
<ul>
<li><strong>Name:</strong> my-animation-lib</li>
<li><strong>Version:</strong> 1.0.0</li>
<li><strong>Main:</strong> dist/index.js (CommonJS)</li>
<li><strong>Module:</strong> dist/index.esm.js (ES Modules)</li>
<li><strong>UMD:</strong> dist/index.umd.js (Universal)</li>
<li><strong>Dependencies:</strong> Three.js, GSAP</li>
<li><strong>Features:</strong> Animation Engine, MathUtils, Effects, Components</li>
</ul>
</div>
<div class="demo-section">
<h2>🚀 Core Animation Engine Test</h2>
<div id="animationStatus" class="status info">Initializing Animation Engine...</div>
<div class="controls">
<button class="btn" onclick="testBasicAnimation()">Test Basic Animation</button>
<button class="btn stop" onclick="stopAllAnimations()">Stop All</button>
<button class="btn success" onclick="testEngineFeatures()">Test All Features</button>
</div>
<div class="demo-element" id="basicElement"></div>
</div>
<div class="demo-section">
<h2>🌊 Advanced Effects Demo</h2>
<div class="controls">
<button class="btn" onclick="testWaveEffect()">Wave Effect</button>
<button class="btn" onclick="testNoiseAnimation()">Noise Animation</button>
<button class="btn" onclick="testSpringAnimation()">Spring Animation</button>
<button class="btn" onclick="testParticleSystem()">Particle System</button>
</div>
<div class="wave-container" id="waveContainer">
<div class="wave-element" id="waveElement"></div>
</div>
<div class="particle-container" id="particleContainer"></div>
</div>
<div class="demo-section">
<h2>🧮 MathUtils Integration Test</h2>
<div class="controls">
<button class="btn" onclick="testMathUtils()">Test Math Functions</button>
<button class="btn" onclick="testEasingFunctions()">Test Easing</button>
<button class="btn" onclick="testAdvancedMath()">Test Advanced Math</button>
</div>
<div class="math-utils-test" id="mathResults"></div>
</div>
<div class="demo-section">
<h2>📱 Component Test</h2>
<div class="controls">
<button class="btn" onclick="testHiTechScroller()">Test HiTechScroller</button>
<button class="btn" onclick="testScrollTrigger()">Test ScrollTrigger</button>
</div>
<div style="height: 300px; background: #f0f0f0; border-radius: 10px; padding: 20px; margin: 20px 0;">
<h3>Scroll Test Area</h3>
<p>Scroll down to test scroll-triggered animations</p>
<div style="height: 200px; background: #e0e0e0; border-radius: 5px; margin: 10px 0;"></div>
</div>
</div>
<div class="demo-section">
<h2>💻 Usage Examples</h2>
<h3>Basic Import (ES Modules)</h3>
<div class="code-example">
import { AnimationEngine, MathUtils, Easing } from 'my-animation-lib';
const engine = new AnimationEngine();
const element = document.getElementById('myElement');
engine.createSpringAnimation(element, {
targetValue: 100,
stiffness: 0.1,
damping: 0.8
});
</div>
<h3>UMD/CDN Usage</h3>
<div class="code-example">
<script src="https://unpkg.com/my-animation-lib@1.0.0/dist/index.umd.js"></script>
<script>
const engine = new MyAnimationLib.AnimationEngine();
const mathUtils = MyAnimationLib.MathUtils;
</script>
</div>
<h3>CommonJS (Node.js)</h3>
<div class="code-example">
const { AnimationEngine, MathUtils } = require('my-animation-lib');
const engine = new AnimationEngine();
const result = MathUtils.lerp(0, 100, 0.5); // 50
</div>
</div>
<div class="demo-section">
<h2>✅ Package Verification</h2>
<div id="verificationResults"></div>
</div>
</div>
<!-- Load dependencies from CDN for testing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.158.0/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- Load our package -->
<script src="../dist/index.umd.js"></script>
<script>
let engine;
let currentAnimations = new Map();
let verificationResults = [];
// Initialize the animation engine
async function initializeEngine() {
try {
// Test UMD loading
if (typeof MyAnimationLib !== 'undefined') {
engine = new MyAnimationLib.AnimationEngine({
enableThreeJS: true,
enableScrollTrigger: true
});
updateStatus('Animation Engine loaded successfully!', 'success');
runPackageVerification();
} else {
throw new Error('MyAnimationLib not found in UMD bundle');
}
} catch (error) {
updateStatus('Failed to initialize Animation Engine: ' + error.message, 'error');
console.error('Initialization error:', error);
}
}
function updateStatus(message, type = 'info') {
const statusElement = document.getElementById('animationStatus');
statusElement.textContent = message;
statusElement.className = `status ${type}`;
}
function testBasicAnimation() {
if (!engine) {
updateStatus('Engine not initialized', 'error');
return;
}
const element = document.getElementById('basicElement');
const animation = engine.createBasicAnimation(element, {
duration: 2,
properties: {
x: 200,
y: 100,
rotation: 360,
scale: 1.5
},
easing: 'bounce'
});
currentAnimations.set('basic', animation);
updateStatus('Basic animation started!', 'success');
}
function testWaveEffect() {
if (!engine) return;
const container = document.getElementById('waveContainer');
const element = document.getElementById('waveElement');
const animation = engine.createAdvancedWaveEffect(element, {
amplitude: 50,
frequency: 2,
duration: 3,
easing: 'sine'
});
currentAnimations.set('wave', animation);
updateStatus('Wave effect started!', 'success');
}
function testNoiseAnimation() {
if (!engine) return;
const element = document.getElementById('basicElement');
const animation = engine.createNoiseAnimation(element, {
intensity: 30,
speed: 0.5,
duration: 5
});
currentAnimations.set('noise', animation);
updateStatus('Noise animation started!', 'success');
}
function testSpringAnimation() {
if (!engine) return;
const element = document.getElementById('basicElement');
const animation = engine.createSpringAnimation(element, {
targetValue: 150,
stiffness: 0.1,
damping: 0.8
});
currentAnimations.set('spring', animation);
updateStatus('Spring animation started!', 'success');
}
function testParticleSystem() {
if (!engine) return;
const container = document.getElementById('particleContainer');
const animation = engine.createParticleSystem(container, {
particleCount: 50,
colors: ['#ff6b6b', '#4ecdc4', '#45b7d1'],
size: { min: 2, max: 6 },
speed: 0.5
});
currentAnimations.set('particles', animation);
updateStatus('Particle system started!', 'success');
}
function testMathUtils() {
if (!MyAnimationLib || !MyAnimationLib.MathUtils) {
updateMathResults('MathUtils not available');
return;
}
const math = MyAnimationLib.MathUtils;
const results = [];
// Test basic math functions
results.push(`clamp(5, 0, 10): ${math.clamp(5, 0, 10)}`);
results.push(`lerp(0, 100, 0.5): ${math.lerp(0, 100, 0.5)}`);
results.push(`map(25, 0, 100, 0, 1): ${math.map(25, 0, 100, 0, 1)}`);
results.push(`random(1, 10): ${math.random(1, 10)}`);
results.push(`distance(0, 0, 3, 4): ${math.distance(0, 0, 3, 4)}`);
updateMathResults(results.join('<br>'));
}
function testEasingFunctions() {
if (!MyAnimationLib || !MyAnimationLib.MathUtils) {
updateMathResults('MathUtils not available');
return;
}
const math = MyAnimationLib.MathUtils;
const results = [];
// Test easing functions
results.push(`bounce(0.5): ${math.bounce(0.5).toFixed(3)}`);
results.push(`elastic(0.5): ${math.elastic(0.5).toFixed(3)}`);
results.push(`back(0.5): ${math.back(0.5).toFixed(3)}`);
results.push(`sine(0.5): ${math.sine(0.5).toFixed(3)}`);
updateMathResults(results.join('<br>'));
}
function testAdvancedMath() {
if (!MyAnimationLib || !MyAnimationLib.MathUtils) {
updateMathResults('MathUtils not available');
return;
}
const math = MyAnimationLib.MathUtils;
const results = [];
// Test advanced math functions
results.push(`fibonacci(10): ${math.fibonacci(10)}`);
results.push(`factorial(5): ${math.factorial(5)}`);
results.push(`isPrime(17): ${math.isPrime(17)}`);
results.push(`gcd(48, 18): ${math.gcd(48, 18)}`);
results.push(`lcm(12, 18): ${math.lcm(12, 18)}`);
updateMathResults(results.join('<br>'));
}
function updateMathResults(content) {
const resultsElement = document.getElementById('mathResults');
resultsElement.innerHTML = `<div class="math-result">${content}</div>`;
}
function testHiTechScroller() {
if (!MyAnimationLib || !MyAnimationLib.HiTechScroller) {
updateStatus('HiTechScroller not available', 'error');
return;
}
updateStatus('HiTechScroller component available!', 'success');
}
function testScrollTrigger() {
if (!MyAnimationLib || !MyAnimationLib.ScrollTrigger) {
updateStatus('ScrollTrigger not available', 'error');
return;
}
updateStatus('ScrollTrigger component available!', 'success');
}
function testEngineFeatures() {
if (!engine) return;
const features = [
'createBasicAnimation',
'createAdvancedWaveEffect',
'createNoiseAnimation',
'createSpringAnimation',
'createParticleSystem',
'createMorphingPath',
'createColorTransition'
];
const availableFeatures = features.filter(feature =>
typeof engine[feature] === 'function'
);
updateStatus(`Available features: ${availableFeatures.length}/${features.length}`, 'success');
}
function stopAllAnimations() {
currentAnimations.forEach((animation, key) => {
if (animation && typeof animation.kill === 'function') {
animation.kill();
}
});
currentAnimations.clear();
updateStatus('All animations stopped', 'info');
}
function runPackageVerification() {
const verificationElement = document.getElementById('verificationResults');
const results = [];
// Check if main classes are available
const classes = ['AnimationEngine', 'MathUtils', 'Easing', 'ScrollTrigger', 'ThreeJSManager'];
classes.forEach(className => {
if (MyAnimationLib[className]) {
results.push(`✅ ${className}: Available`);
} else {
results.push(`❌ ${className}: Missing`);
}
});
// Check if methods are available
if (engine) {
const methods = ['createBasicAnimation', 'createAdvancedWaveEffect', 'createNoiseAnimation'];
methods.forEach(method => {
if (typeof engine[method] === 'function') {
results.push(`✅ ${method}(): Available`);
} else {
results.push(`❌ ${method}(): Missing`);
}
});
}
// Check package exports
if (typeof module !== 'undefined' && module.exports) {
results.push('✅ CommonJS: Supported');
}
if (typeof define === 'function' && define.amd) {
results.push('✅ AMD: Supported');
}
results.push('✅ UMD: Supported (confirmed)');
verificationElement.innerHTML = results.map(result =>
`<div class="status ${result.includes('✅') ? 'success' : 'error'}">${result}</div>`
).join('');
}
// Initialize when page loads
window.addEventListener('load', initializeEngine);
// Make functions globally available for testing
window.testBasicAnimation = testBasicAnimation;
window.testWaveEffect = testWaveEffect;
window.testNoiseAnimation = testNoiseAnimation;
window.testSpringAnimation = testSpringAnimation;
window.testParticleSystem = testParticleSystem;
window.testMathUtils = testMathUtils;
window.testEasingFunctions = testEasingFunctions;
window.testAdvancedMath = testAdvancedMath;
window.testHiTechScroller = testHiTechScroller;
window.testScrollTrigger = testScrollTrigger;
window.testEngineFeatures = testEngineFeatures;
window.stopAllAnimations = stopAllAnimations;
</script>
</body>
</html>