AnimationManager

Overview

AnimationManager is the animation management system in Now.js Framework. It supports predefined animations, custom keyframes, chaining, and stagger effects.

When to use:

• Need to animate elements
• Need to chain animations
• Need stagger animations for lists
• Need custom keyframe animations

Why use it:

• ✅ Predefined animations (fade, slide, scale, bounce)
• ✅ Custom keyframe support
• ✅ Animation chaining
• ✅ Parallel animations
• ✅ Stagger effects
• ✅ Pause/Resume support
• ✅ Promise-based API

Basic Usage

Declarative Template Directives

AnimationManager also powers TemplateManager's declarative animation directives. These are the current template-facing animation APIs:

<section data-show="panelOpen"
         data-show-animation="fade"
         data-show-duration="200">
  ...
</section>

<article data-enter="slideUp"
         data-enter-duration="350"
         data-enter-threshold="0.2">
  ...
</article>

<div data-transition="activeTab"
     data-transition-animation="fade"
     data-transition-duration="180">
  ...
</div>

Important notes:

• data-show expects a boolean-style expression such as isOpen or item.visible, not an animation name.
• There is no data-hide template directive in the current TemplateManager. Use data-show together with data-show-animation for visibility toggles.
• Reactive cleanup and observer teardown are handled automatically when TemplateManager reprocesses or removes the element.
• For the template-focused guide, see template/data-animation.md.

Simple Animation

// Fade in
await AnimationManager.animate(element, 'fade', {
  direction: 'in',
  duration: 300
});

// Fade out
await AnimationManager.animate(element, 'fade', {
  direction: 'out',
  duration: 300
});

Slide Animation

// Slide up
await AnimationManager.animate(element, 'slideUp', {
  direction: 'in',
  duration: 400
});

// Slide from right
await AnimationManager.animate(element, 'slideRight', {
  direction: 'in',
  duration: 400
});

Predefined Animations

Animation Options

AnimationManager.animate(element, 'fade', {
  // Direction: 'in' or 'out'
  direction: 'in',

  // Duration in ms
  duration: 300,

  // Easing function
  easing: 'easeOutQuart',

  // Animation delay
  delay: 0,

  // Iterations (Infinity for loop)
  iterations: 1,

  // Fill mode
  fill: 'forwards',

  // Callback on complete
  onComplete: () => console.log('Done!')
});

Easing Functions

API Reference

AnimationManager.animate(element, animation, options)

Animate element

Returns: Promise<void>

await AnimationManager.animate(element, 'bounce', {
  direction: 'in',
  duration: 500
});

AnimationManager.chain(element, animations)

Chain animations sequentially

Returns: Promise<void>

await AnimationManager.chain(element, [
  { name: 'fadeIn', duration: 200 },
  { name: 'pulse', duration: 300 },
  { name: 'scale', direction: 'out', duration: 200 }
]);

AnimationManager.parallel(element, animations, options)

Run animations simultaneously

Returns: Promise<void>

await AnimationManager.parallel(element, [
  'fade',
  'scale'
], {
  direction: 'in',
  duration: 300
});

AnimationManager.stagger(elements, animation, options)

Stagger animation for multiple elements

Returns: Promise<void>

const items = document.querySelectorAll('.list-item');
await AnimationManager.stagger(items, 'slideUp', {
  direction: 'in',
  duration: 300,
  stagger: 50  // 50ms between each
});

Custom Keyframes

// Custom animation
await AnimationManager.animate(element, {
  from: { opacity: 0, transform: 'translateY(-50px)' },
  to: { opacity: 1, transform: 'translateY(0)' }
}, {
  duration: 400,
  easing: 'easeOutBack'
});

// With steps
await AnimationManager.animate(element, {
  from: { transform: 'scale(1)' },
  steps: [
    { transform: 'scale(1.2)', offset: 0.5 }
  ],
  to: { transform: 'scale(1)' }
}, { duration: 300 });

Real-World Examples

Modal Animation

async function showModal(modal) {
  modal.style.display = 'block';
  await AnimationManager.animate(modal, 'scale', {
    direction: 'in',
    duration: 200,
    easing: 'easeOutBack'
  });
}

async function hideModal(modal) {
  await AnimationManager.animate(modal, 'fade', {
    direction: 'out',
    duration: 150
  });
  modal.style.display = 'none';
}

List Items Animation

async function animateListItems() {
  const items = document.querySelectorAll('.list-item');

  await AnimationManager.stagger(items, 'slideUp', {
    direction: 'in',
    duration: 300,
    stagger: 30
  });
}

Page Transition

async function pageTransition(oldContent, newContent) {
  // Fade out old
  await AnimationManager.animate(oldContent, 'fade', {
    direction: 'out',
    duration: 200
  });

  // Replace content
  oldContent.replaceWith(newContent);

  // Fade in new
  await AnimationManager.animate(newContent, 'fade', {
    direction: 'in',
    duration: 200
  });
}

Common Pitfalls

⚠️ 1. Wait for Animation to Complete

// ❌ Not waiting for animation
AnimationManager.animate(el, 'fade', { direction: 'out' });
el.remove();  // Element removed before animation completes

// ✅ Wait for animation
await AnimationManager.animate(el, 'fade', { direction: 'out' });
el.remove();

⚠️ 2. Display Property

// ❌ Hidden element can't be animated
element.style.display = 'block';
await AnimationManager.animate(element, 'fade', { direction: 'in' });

// ✅ Set display first, then opacity 0
element.style.display = 'block';
element.style.opacity = '0';
await AnimationManager.animate(element, 'fade', { direction: 'in' });

Related Documentation

• FilterManager - Filter with animations
• DialogManager - Dialog animations