my-animation-lib
Version:
A powerful animation library combining Three.js, GSAP, custom scroll triggers, and advanced effects with MathUtils integration
273 lines (238 loc) • 8.94 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 - Basic Usage</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #0a0a0a;
color: white;
overflow-x: hidden;
}
.section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 2rem;
}
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.features {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.demo {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.contact {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
h1 {
font-size: 4rem;
margin-bottom: 1rem;
text-align: center;
}
h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
text-align: center;
}
p {
font-size: 1.2rem;
text-align: center;
max-width: 600px;
line-height: 1.6;
}
.animated-element {
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
margin: 1rem;
transform: scale(0.5);
opacity: 0;
}
.parallax-element {
background: rgba(255, 255, 255, 0.2);
padding: 3rem;
border-radius: 15px;
backdrop-filter: blur(15px);
margin: 2rem;
}
.image-container {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 50%;
margin: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.scroll-indicator {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
}
.scroll-dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
margin: 10px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.scroll-dot.active {
background: white;
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="scroll-container">
<section class="section hero" data-section="0">
<h1 class="animated-element">My Animation Library</h1>
<p class="animated-element">Create stunning web experiences with minimal code</p>
</section>
<section class="section features" data-section="1">
<h2 class="animated-element">Features</h2>
<div class="parallax-element">
<p>Advanced animations, scroll triggers, Three.js integration, and more!</p>
</div>
</section>
<section class="section demo" data-section="2">
<h2 class="animated-element">Demo</h2>
<div class="image-container" id="morph-image">
Click me!
</div>
</section>
<section class="section contact" data-section="3">
<h2 class="animated-element">Get Started</h2>
<p class="animated-element">Install via npm: npm install my-animation-lib</p>
</section>
</div>
<div class="scroll-indicator">
<div class="scroll-dot active" data-section="0"></div>
<div class="scroll-dot" data-section="1"></div>
<div class="scroll-dot" data-section="2"></div>
<div class="scroll-dot" data-section="3"></div>
</div>
<!-- Load dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r158/three.min.js"></script>
<!-- Load your library -->
<script type="module">
import { AnimationEngine, HiTechScroller } from '../dist/index.esm.js';
// Initialize the animation engine
const engine = new AnimationEngine({
enableThreeJS: true,
enableScrollTrigger: true,
enableParallax: true,
enableImageEffects: true
});
// Wait for initialization
engine.on('ready', () => {
console.log('Animation engine ready!');
// Initialize Hi-Tech Scroller
const container = document.querySelector('.scroll-container');
const scroller = new HiTechScroller(container, {
speed: 1.2,
smoothness: 0.08,
showProgress: true,
showIndicator: true
});
// Add sections to scroller
const sections = document.querySelectorAll('.section');
sections.forEach(section => scroller.addSection(section));
// Create entrance animations
const animatedElements = document.querySelectorAll('.animated-element');
animatedElements.forEach((element, index) => {
const animation = engine.createAnimation(`entrance_${index}`, {
duration: 1.5,
ease: 'power2.out'
});
// Add animation sequence
animation.timeline
.fromTo(element, {
opacity: 0,
scale: 0.5,
y: 50
}, {
opacity: 1,
scale: 1,
y: 0,
duration: 1,
ease: 'power2.out'
})
.fromTo(element, {
rotation: 5
}, {
rotation: 0,
duration: 0.5,
ease: 'power2.out'
}, '-=0.5');
});
// Create parallax effects
const parallaxElements = document.querySelectorAll('.parallax-element');
parallaxElements.forEach(element => {
engine.createParallax(element, {
speed: 0.3,
direction: 'vertical',
easing: 'power2.out'
});
});
// Play entrance animations with delay
animatedElements.forEach((element, index) => {
setTimeout(() => {
engine.playAnimation(`entrance_${index}`);
}, index * 200);
});
// Setup scroll indicator
const scrollDots = document.querySelectorAll('.scroll-dot');
scrollDots.forEach((dot, index) => {
dot.addEventListener('click', () => {
scroller.scrollToSection(index, 1.5);
});
});
// Update scroll indicator
scroller.on('scroll', (progress) => {
const currentSection = Math.floor(progress * sections.length);
scrollDots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentSection);
});
});
// Image effects demo
const morphImage = document.getElementById('morph-image');
let effectIndex = 0;
const effects = ['morph', 'distortion', 'glitch', 'wave'];
morphImage.addEventListener('click', () => {
const effectType = effects[effectIndex];
engine.createImageEffect(morphImage, effectType, {
duration: 2,
intensity: 20
});
effectIndex = (effectIndex + 1) % effects.length;
morphImage.textContent = `Effect: ${effectType}`;
});
});
// Handle errors
engine.on('error', (error) => {
console.error('Animation engine error:', error);
});
</script>
</body>
</html>