Using AnimBase

AnimBase provides two main animation strategies:

• Controlled Animators – driven by external properties like scroll, range inputs, or media playback.
• Timed Animators – driven by internal frame-based timelines, typically triggered manually or automatically.

🕹 Controlled Animators

Controlled animators link animation progress to a property of an external element, such as scrollTop, value, or currentTime.

🔧 Required Attributes

✅ Behavior Rules

• If only data-anim-controlled-by is present, controller defaults to window.
• If only data-anim-controller-ref is present and not window, default property is value.
• If neither is present but the element has data-anim-init, it will fallback to Timed Animator.

🧠 Default Event Mapping

{
  scrollTop:     'scroll',
  scrollY:       'scroll',
  scrollLeft:    'scroll',
  scrollX:       'scroll',
  value:         'input',
  currentTime:   'timeupdate'
}

Use data-anim-listen to override if needed.

💡 Examples

Scroll-Controlled

<div
	data-anim-controlled-by="scrollTop"
	data-anim-init='{"opacity": "0"}'
	data-anim-config='{"100": {"opacity": "1"}}'
>
	Scroll me into view
</div>

Input-Controlled

<input type="range" id="slider" />

<div
	data-anim-controller-ref="#slider"
	data-anim-init='{"opacity": "0"}'
	data-anim-config='{"100": {"opacity": "1"}}'
>
	Controlled by slider
</div>

Media-Controlled

<video id="video1" src="..." autoplay muted></video>

<div
	data-anim-controller-ref="#video1"
	data-anim-controlled-by="currentTime"
	data-anim-init='{"opacity": "0"}'
	data-anim-config='{"10": {"opacity": "1"}}'
>
	Appears after 10s
</div>

Input-Controlled (Multiple Targets)

<input type="range" id="slider" />

<!-- First element controlled by #slider -->
<div
	data-anim-controller-ref="#slider"
	data-anim-init='{"opacity": "0"}'
	data-anim-config='{"100": {"opacity": "1"}}'
>
	Fades in
</div>

<!-- Second element also controlled by #slider -->
<div
	data-anim-controller-ref="#slider"
	data-anim-init='{"marginLeft": "0px"}'
	data-anim-config='{"100": {"marginLeft": "100px.outSine"}}'
>
	Slides to the right
</div>

💡 Both elements respond to the same range input. AnimBase handles grouping automatically using the controller ref and tracked property.

⏱ Timed Animators

Timed animators are frame-based animation groups that run over time, either triggered programmatically or configured to start automatically.

🔧 Required Attributes

🧠 Behavior

• All elements with the same data-anim-trigger-group will animate together.
• If data-anim-trigger-group is omitted, the element belongs to the "default" group.
• The config for a group must be defined using a separate dummy element that only contains data-anim-trigger-config.
• Group animation can be triggered via API (AnimBase.play()), or automatically with autostart.
• Each element should define its own data-anim-init and data-anim-config.

⚙️ Config Options (via data-anim-trigger-config)

{
  "max": 300,
  "speed": 60,
  "autostart": true,
  "once": true,
  "reverse": false
}

• max – maximum frame count (default: 100)
• speed – frames per second (default: 60)
• autostart – if true, animation starts automatically
• once – stops after one full cycle
• reverse – plays from max → 0

💡 Declarative Example

<!-- Animation element -->
<div
	data-anim-trigger-group="intro"
	data-anim-init='{"opacity": "0", "transform": "translateY(50px)"}'
	data-anim-config='{"100": {"opacity": "1", "transform": "translateY(0px.outBack)"}}'
>
	Hello!
</div>

<!-- Dummy config element (declarative config setup) -->
<div data-anim-trigger-group="intro" data-anim-trigger-config='{"autostart": true, "speed": 40}'></div>

💻 Imperative Alternative

AnimBase.createTimedAnimator("intro", {
  speed: 40,
  max: 100,
  once: true,
  autostart: true,
});

AnimBase.play("intro");

🎮 Manual Trigger with API

<button onclick="AnimBase.play('intro')">Play</button>
<button onclick="AnimBase.stop('intro')">Stop</button>