AnimationManager Examples

Comprehensive animation examples using Data Attributes and JavaScript API

Example 1: Basic Animations (Data Attributes)

ใช้ data attributes เพื่อสร้าง animation โดยไม่ต้องเขียน JavaScript

Fade

Fade Animation

Slide Up

Slide Up

Scale

Scale

Bounce

Bounce

Shake

Shake

Flip

Flip

HTML Code:

<!-- Fade Animation Button -->
              <div class="animation-box" id="fadeBox">Fade Animation</div>
              <button class="button"
              data-animate="fadeBox"
              data-animation="fade">Animate</button>

              <!-- Bounce Animation Button -->
              <div class="animation-box" id="bounceBox">Bounce</div>
              <button class="button"
              data-animate="bounceBox"
              data-animation="bounce">Animate</button>

JavaScript (Auto-setup):

// Setup animation triggers using data attributes
              document.querySelectorAll('[data-animate]').forEach(button => {
              button.addEventListener('click', () => {
              const targetId = button.dataset.animate;
              const animation = button.dataset.animation || 'fade';
              const element = document.getElementById(targetId);

              AnimationManager.animate(element, animation, {
              duration: 500
              });
              });
              });

Example 2: Show/Hide with data-show

ใช้ data-show เพื่อแสดง/ซ่อน element พร้อม animation โดยอัตโนมัติ

Animated Panel

This panel shows and hides with smooth animation.

Try different animations using the dropdown!

HTML Code:

<!-- Animated Panel with data-show -->
              <div id="animatedPanel"
              data-show="isVisible"
              data-show-animation="fade"
              data-show-duration="300">
              <h3>Animated Panel</h3>
              <p>This panel shows and hides with smooth animation.</p>
              </div>

              <!-- Toggle Button -->
              <button id="togglePanel">Toggle Panel</button>

Example 3: Enter Animation (Scroll Reveal)

ใช้ data-enter เพื่อ animate elements เมื่อเข้ามาใน viewport

Scroll down to see elements animate in:

Card 1

Slides up when entering viewport

Card 2

Slides from right

Card 3

Scales in smoothly

Card 4

Bounces into view

HTML Code:

<!-- Reveal on Scroll -->
              <div class="card"
              data-enter="slideUp"
              data-enter-duration="500"
              data-enter-threshold="0.2">
              <h3>Card 1</h3>
              <p>Slides up when entering viewport</p>
              </div>

              <div class="card"
              data-enter="bounce"
              data-enter-duration="700">
              <h3>Card 2</h3>
              <p>Bounces into view</p>
              </div>

Example 4: Stagger Animation (List Items)

ใช้ AnimationManager.stagger() เพื่อ animate หลาย elements พร้อมกันแบบมี delay

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

JavaScript Code:

// Stagger animation for list items
              document.getElementById('staggerList').addEventListener('click', () => {
              const items = document.querySelectorAll('.stagger-item');
              const delay = document.getElementById('staggerDelay').value;

              // Reset visibility first
              items.forEach(item => {
              item.style.opacity = '0';
              item.style.transform = 'translateX(-20px)';
              });

              // Animate with stagger
              AnimationManager.stagger(items, 'slideRight', {
              stagger: parseInt(delay),
              duration: 400
              });
              });

Example 5: Parallel Animations

ใช้ AnimationManager.parallel() เพื่อรัน animations หลายตัวพร้อมกัน

Parallel

JavaScript Code:

// Run multiple animations in parallel
              document.getElementById('parallelAnimate').addEventListener('click', () => {
              const box = document.getElementById('parallelBox');

              AnimationManager.parallel(box, [
              'scale',
              'rotate'
              ], {
              duration: 800
              });
              });

Example 6: Animation Chain (Sequential)

ใช้ AnimationManager.chain() เพื่อรัน animations ต่อเนื่องตามลำดับ

Sequence

JavaScript Code:

// Chain animations sequentially
              document.getElementById('chainAnimate').addEventListener('click', async () => {
              const box = document.getElementById('chainBox');

              await AnimationManager.chain(box, [
              { name: 'slideUp', options: { duration: 400 } },
              { name: 'shake', options: { duration: 500 } },
              { name: 'scale', options: { duration: 300 } },
              { name: 'pulse', options: { duration: 400, iterations: 2 } }
              ]);

              console.log('Chain complete!');
              });

Example 7: Pause/Resume Controls

ใช้ pause() และ resume() เพื่อควบคุม animation

Control Me

JavaScript Code:

const box = document.getElementById('controlBox');

              // Start long animation
              document.getElementById('startLong').addEventListener('click', () => {
              AnimationManager.animate(box, 'rotate', {
              duration: 5000,
              iterations: Infinity
              });
              });

              // Pause animation
              document.getElementById('pauseBtn').addEventListener('click', () => {
              AnimationManager.pause(box);
              });

              // Resume animation
              document.getElementById('resumeBtn').addEventListener('click', () => {
              AnimationManager.resume(box);
              });

              // Stop animation
              document.getElementById('stopBtn').addEventListener('click', () => {
              AnimationManager.stop(box);
              });

Example 8: Animation Queue

ใช้ AnimationManager.queue() เพื่อเพิ่ม animations เข้าคิว

Queue Box
Queue: 0 animations pending

JavaScript Code:

const queueBox = document.getElementById('queueBox');
              let queueCount = 0;

              function updateQueueCount() {
              document.getElementById('queueCount').textContent = queueCount;
              }

              // Add bounce to queue
              document.getElementById('addBounce').addEventListener('click', () => {
              queueCount++;
              updateQueueCount();

              AnimationManager.queue(queueBox, 'bounce', { duration: 500 })
              .then(() => {
              queueCount--;
              updateQueueCount();
              });
              });

              // Add shake to queue
              document.getElementById('addShake').addEventListener('click', () => {
              queueCount++;
              updateQueueCount();

              AnimationManager.queue(queueBox, 'shake', { duration: 600 })
              .then(() => {
              queueCount--;
              updateQueueCount();
              });
              });

              // Clear queue
              document.getElementById('clearQueue').addEventListener('click', () => {
              AnimationManager.clearQueue(queueBox);
              queueCount = 0;
              updateQueueCount();
              });

Example 9: Easing Presets

AnimationManager มี easing presets หลากหลายให้เลือกใช้

JavaScript Code:

document.getElementById('testEasing').addEventListener('click', () => {
              const ball = document.getElementById('easingBall');
              const easing = document.getElementById('easingSelect').value;

              // Reset position
              ball.style.transform = 'translateX(0)';

              // Animate with selected easing
              AnimationManager.animate(ball, {
              from: { transform: 'translateX(0)' },
              to: { transform: 'translateX(400px)' }
              }, {
              duration: 1000,
              easing: easing
              });
              });

Example 10: Custom Animation & Registration

สร้าง animation แบบ custom และลงทะเบียนเป็น preset

Custom

JavaScript Code:

// Custom inline animation
              document.getElementById('customAnimate').addEventListener('click', () => {
              const box = document.getElementById('customBox');

              AnimationManager.animate(box, {
              from: {
              transform: 'rotate(0) scale(1)',
              backgroundColor: '#3498db',
              borderRadius: '0'
              },
              steps: [
              { transform: 'rotate(180deg) scale(1.2)', backgroundColor: '#e74c3c', borderRadius: '50%', offset: 0.5 }
              ],
              to: {
              transform: 'rotate(360deg) scale(1)',
              backgroundColor: '#2ecc71',
              borderRadius: '0'
              }
              }, {
              duration: 1500
              });
              });

              // Register custom animation as preset
              document.getElementById('registerCustom').addEventListener('click', () => {
              AnimationManager.registerAnimation('myCustomAnim', {
              in: {
              from: { transform: 'translateY(-100%) rotate(-45deg)', opacity: 0 },
              to: { transform: 'translateY(0) rotate(0)', opacity: 1 }
              },
              out: {
              from: { transform: 'translateY(0) rotate(0)', opacity: 1 },
              to: { transform: 'translateY(100%) rotate(45deg)', opacity: 0 }
              }
              });

              alert('Custom animation "myCustomAnim" registered!');
              });

              // Use registered animation
              document.getElementById('useRegistered').addEventListener('click', () => {
              const box = document.getElementById('customBox');

              AnimationManager.animate(box, 'myCustomAnim', {
              direction: 'in',
              duration: 600
              });
              });

All Available Animations

รายการ animations ทั้งหมดที่มีให้ใช้งาน:

fade
slideUp
slideDown
slideLeft
slideRight
scale
scaleUp
rotate
bounce
shake
pulse
flip
flipX
zoomIn
swing

API Reference (Quick)

Method Description Example
animate(el, anim, opts) Animate single element AnimationManager.animate(el, 'fade', {duration: 300})
chain(el, anims) Run animations sequentially AnimationManager.chain(el, ['fade', 'scale'])
parallel(el, anims) Run animations simultaneously AnimationManager.parallel(el, ['fade', 'rotate'])
stagger(els, anim, opts) Animate list with delay AnimationManager.stagger(items, 'slideUp', {stagger: 100})
queue(el, anim) Add to animation queue AnimationManager.queue(el, 'bounce')
pause(el) Pause running animations AnimationManager.pause(el)
resume(el) Resume paused animations AnimationManager.resume(el)
stop(el) Cancel animations AnimationManager.stop(el)

Data Attributes

Attribute Description Example
data-show Show/hide with animation based on expression data-show="isVisible"
data-show-animation Animation to use for show/hide data-show-animation="fade"
data-show-duration Duration in milliseconds data-show-duration="300"
data-enter Animation when entering viewport data-enter="slideUp"
data-enter-threshold Intersection threshold (0-1) data-enter-threshold="0.2"
data-leave Animation when leaving viewport data-leave="fade"
data-transition Animate on value change data-transition="currentTab"