my-animation-lib
Version:
A powerful animation library combining Three.js, GSAP, custom scroll triggers, and advanced effects with MathUtils integration
570 lines (486 loc) • 20 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 - NPM Package Verification</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%);
color: #333;
line-height: 1.6;
}
.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;
}
.status-banner {
background: linear-gradient(45deg, #4CAF50, #45a049);
color: white;
padding: 15px;
border-radius: 10px;
text-align: center;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.demo-section {
background: white;
border-radius: 15px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.demo-section:hover {
transform: translateY(-5px);
}
.demo-section h3 {
color: #667eea;
margin-bottom: 15px;
font-size: 1.5rem;
}
.demo-element {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
margin: 15px 0;
display: inline-block;
cursor: pointer;
transition: all 0.3s ease;
}
.demo-element:hover {
transform: scale(1.1);
}
.controls {
margin: 15px 0;
}
.btn {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
margin: 5px;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.btn:active {
transform: translateY(0);
}
.btn.stop {
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
}
.code-block {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
}
.info-box {
background: linear-gradient(45deg, #74b9ff, #0984e3);
color: white;
padding: 15px;
border-radius: 10px;
margin: 15px 0;
}
.warning-box {
background: linear-gradient(45deg, #fdcb6e, #e17055);
color: white;
padding: 15px;
border-radius: 10px;
margin: 15px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.feature-card {
background: white;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.package-info {
background: linear-gradient(45deg, #00b894, #00cec9);
color: white;
padding: 20px;
border-radius: 15px;
margin: 20px 0;
text-align: center;
}
.package-info h2 {
margin-bottom: 15px;
font-size: 2rem;
}
.package-info .version {
background: rgba(255,255,255,0.2);
padding: 5px 15px;
border-radius: 20px;
display: inline-block;
margin: 10px;
}
.installation-code {
background: #2d3436;
color: #00b894;
padding: 20px;
border-radius: 10px;
font-family: 'Courier New', monospace;
margin: 15px 0;
text-align: center;
}
.footer {
text-align: center;
margin-top: 40px;
color: white;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 My Animation Library</h1>
<p>NPM Package Verification & Demo</p>
</div>
<div class="status-banner">
<h2>✅ Package Successfully Published to NPM!</h2>
<p>Version 2.0.1 is now publicly available for anyone to use</p>
</div>
<div class="package-info">
<h2>📦 Package Information</h2>
<div class="version">Version: 2.0.1</div>
<div class="version">License: MIT</div>
<div class="version">Size: 156.0 kB</div>
<div class="installation-code">
npm install my-animation-lib
</div>
</div>
<div class="grid">
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>Animation Engine</h3>
<p>High-performance GSAP-based animation system</p>
</div>
<div class="feature-card">
<div class="feature-icon">🧮</div>
<h3>MathUtils</h3>
<p>Advanced mathematical functions for natural animations</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎭</div>
<h3>Effects Library</h3>
<p>Comprehensive collection of animation effects</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Performance</h3>
<p>Optimized for smooth 60fps animations</p>
</div>
</div>
<div class="demo-section">
<h3>🎯 Basic Animation Demo</h3>
<div class="demo-element" id="basicDemo"></div>
<div class="controls">
<button class="btn" onclick="startBasicAnimation()">Start Animation</button>
<button class="btn stop" onclick="stopBasicAnimation()">Stop</button>
</div>
<div class="code-block">
// Basic usage
import { AnimationEngine } from 'my-animation-lib';
const engine = new AnimationEngine();
const element = document.getElementById('myElement');
engine.createBasicAnimation(element, {
duration: 2,
properties: { x: 200, rotation: 360 }
});
</div>
</div>
<div class="demo-section">
<h3>🌊 Wave Effect Demo</h3>
<div class="demo-element" id="waveDemo"></div>
<div class="controls">
<button class="btn" onclick="startWaveEffect()">Start Wave</button>
<button class="btn stop" onclick="stopWaveEffect()">Stop</button>
</div>
<div class="code-block">
// Wave effect
engine.createAdvancedWaveEffect(element, {
amplitude: 50,
frequency: 2,
duration: 3,
easing: 'sine'
});
</div>
</div>
<div class="demo-section">
<h3>🎨 Spring Animation Demo</h3>
<div class="demo-element" id="springDemo"></div>
<div class="controls">
<button class="btn" onclick="startSpringAnimation()">Start Spring</button>
<button class="btn stop" onclick="stopSpringAnimation()">Stop</button>
</div>
<div class="code-block">
// Spring animation
engine.createSpringAnimation(element, {
targetValue: 100,
stiffness: 0.1,
damping: 0.8
});
</div>
</div>
<div class="demo-section">
<h3>✨ Particle System Demo</h3>
<div id="particleContainer" style="height: 200px; background: #f0f0f0; border-radius: 10px; position: relative; overflow: hidden;"></div>
<div class="controls">
<button class="btn" onclick="startParticleSystem()">Start Particles</button>
<button class="btn stop" onclick="stopParticleSystem()">Stop</button>
</div>
<div class="code-block">
// Particle system
engine.createParticleSystem(container, {
count: 50,
colors: ['#ff6b6b', '#4ecdc4', '#45b7d1'],
size: { min: 3, max: 8 }
});
</div>
</div>
<div class="demo-section">
<h3>🎭 MathUtils Functions Demo</h3>
<div class="controls">
<button class="btn" onclick="testMathUtils()">Test MathUtils</button>
<button class="btn" onclick="showEasingComparison()">Compare Easing</button>
</div>
<div id="mathUtilsOutput" class="code-block" style="min-height: 100px;">
Click "Test MathUtils" to see mathematical functions in action...
</div>
</div>
<div class="info-box">
<h3>📚 Documentation & Resources</h3>
<p><strong>NPM Package:</strong> <a href="https://www.npmjs.com/package/my-animation-lib" style="color: white;">https://www.npmjs.com/package/my-animation-lib</a></p>
<p><strong>GitHub:</strong> <a href="https://github.com/yourusername/my-animation-lib" style="color: white;">https://github.com/yourusername/my-animation-lib</a></p>
<p><strong>Examples:</strong> Check the examples/ folder for more demos</p>
</div>
<div class="warning-box">
<h3>⚠️ Important Notes</h3>
<p><strong>Dependencies:</strong> This package requires Three.js and GSAP to be installed separately</p>
<p><strong>Browser Support:</strong> Modern browsers with ES6+ support</p>
<p><strong>License:</strong> MIT - Free to use in commercial and personal projects</p>
</div>
<div class="footer">
<p>🎉 Your animation library is now live on npm! Share it with the world!</p>
<p>Made with ❤️ by suryadeep1212</p>
</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 published package -->
<script src="https://unpkg.com/my-animation-lib@latest/dist/index.umd.js"></script>
<script>
let engine;
let currentAnimations = new Map();
let particleSystem = null;
// Initialize the animation engine
function initializeEngine() {
try {
// Check if the package loaded successfully
if (typeof MyAnimationLib === 'undefined') {
throw new Error('Package failed to load');
}
engine = new MyAnimationLib.AnimationEngine({
enableThreeJS: false,
enableScrollTrigger: false
});
engine.on('ready', () => {
console.log('✅ Animation Engine ready from npm package!');
document.querySelector('.status-banner h2').innerHTML = '✅ Package Successfully Published to NPM! (Engine Ready)';
});
console.log('🎉 Package loaded successfully from npm!');
console.log('Available exports:', Object.keys(MyAnimationLib));
} catch (error) {
console.error('❌ Error loading package:', error);
document.querySelector('.status-banner').innerHTML = '<h2>❌ Error Loading Package</h2><p>' + error.message + '</p>';
}
}
// Basic animation
function startBasicAnimation() {
if (!engine) return;
const element = document.getElementById('basicDemo');
const animation = engine.createBasicAnimation(element, {
duration: 2,
properties: { x: 200, rotation: 360, scale: 1.5 },
easing: 'bounce'
});
currentAnimations.set('basic', animation);
}
function stopBasicAnimation() {
if (!engine) return;
const animation = currentAnimations.get('basic');
if (animation) {
animation.kill();
currentAnimations.delete('basic');
}
const element = document.getElementById('basicDemo');
gsap.set(element, { clearProps: 'all' });
}
// Wave effect
function startWaveEffect() {
if (!engine) return;
const element = document.getElementById('waveDemo');
const animation = engine.createAdvancedWaveEffect(element, {
amplitude: 30,
frequency: 3,
duration: 4,
easing: 'sine',
direction: 'vertical'
});
currentAnimations.set('wave', animation);
}
function stopWaveEffect() {
if (!engine) return;
const animation = currentAnimations.get('wave');
if (animation) {
animation.kill();
currentAnimations.delete('wave');
}
const element = document.getElementById('waveDemo');
gsap.set(element, { clearProps: 'all' });
}
// Spring animation
function startSpringAnimation() {
if (!engine) return;
const element = document.getElementById('springDemo');
const animation = engine.createSpringAnimation(element, {
targetValue: 150,
stiffness: 0.15,
damping: 0.7,
duration: 3
});
currentAnimations.set('spring', animation);
}
function stopSpringAnimation() {
if (!engine) return;
const animation = currentAnimations.get('spring');
if (animation) {
animation.kill();
currentAnimations.delete('spring');
}
const element = document.getElementById('springDemo');
gsap.set(element, { clearProps: 'all' });
}
// Particle system
function startParticleSystem() {
if (!engine) return;
const container = document.getElementById('particleContainer');
particleSystem = engine.createParticleSystem(container, {
count: 30,
colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#fdcb6e'],
size: { min: 4, max: 10 },
speed: { min: 0.5, max: 2 },
life: { min: 2, max: 5 }
});
currentAnimations.set('particles', particleSystem);
}
function stopParticleSystem() {
if (!engine) return;
const animation = currentAnimations.get('particles');
if (animation) {
animation.kill();
currentAnimations.delete('particles');
}
const container = document.getElementById('particleContainer');
container.innerHTML = '';
}
// Test MathUtils functions
function testMathUtils() {
if (!engine || !MyAnimationLib.MathUtils) return;
const output = document.getElementById('mathUtilsOutput');
const mathUtils = MyAnimationLib.MathUtils;
let results = '🧮 MathUtils Functions Test:\n\n';
results += `clamp(5, 0, 10): ${mathUtils.clamp(5, 0, 10)}\n`;
results += `lerp(0, 100, 0.5): ${mathUtils.lerp(0, 100, 0.5)}\n`;
results += `map(25, 0, 100, 0, 1): ${mathUtils.map(25, 0, 100, 0, 1)}\n`;
results += `random(1, 10): ${mathUtils.random(1, 10)}\n`;
results += `distance(0, 0, 3, 4): ${mathUtils.distance(0, 0, 3, 4)}\n`;
results += `angle(0, 0, 1, 1): ${mathUtils.angle(0, 0, 1, 1).toFixed(2)}°\n`;
results += `smoothstep(0.5): ${mathUtils.smoothstep(0.5).toFixed(3)}\n`;
results += `bounce(0.5): ${mathUtils.bounce(0.5).toFixed(3)}\n`;
results += `elastic(0.5): ${mathUtils.elastic(0.5).toFixed(3)}\n`;
output.textContent = results;
}
// Show easing comparison
function showEasingComparison() {
if (!engine || !MyAnimationLib.Easing || !MyAnimationLib.MathUtils) return;
const output = document.getElementById('mathUtilsOutput');
const easing = MyAnimationLib.Easing;
const mathUtils = MyAnimationLib.MathUtils;
let results = '📊 Easing Functions Comparison:\n\n';
results += 'Standard Easing:\n';
results += `easeInQuad(0.5): ${easing.easeInQuad(0.5).toFixed(3)}\n`;
results += `easeOutQuad(0.5): ${easing.easeOutQuad(0.5).toFixed(3)}\n`;
results += `easeInOutQuad(0.5): ${easing.easeInOutQuad(0.5).toFixed(3)}\n\n`;
results += 'MathUtils Easing:\n';
results += `sine(0.5): ${mathUtils.sine(0.5).toFixed(3)}\n`;
results += `cubic(0.5): ${mathUtils.cubic(0.5).toFixed(3)}\n`;
results += `bounce(0.5): ${mathUtils.bounce(0.5).toFixed(3)}\n`;
output.textContent = results;
}
// Initialize when page loads
window.addEventListener('load', initializeEngine);
// Make functions globally available
window.startBasicAnimation = startBasicAnimation;
window.stopBasicAnimation = stopBasicAnimation;
window.startWaveEffect = startWaveEffect;
window.stopWaveEffect = stopWaveEffect;
window.startSpringAnimation = startSpringAnimation;
window.stopSpringAnimation = stopSpringAnimation;
window.startParticleSystem = startParticleSystem;
window.stopParticleSystem = stopParticleSystem;
window.testMathUtils = testMathUtils;
window.showEasingComparison = showEasingComparison;
</script>
</body>
</html>