AnimX Docs

Appearance

Flexible Types & Target Resolution ​

Many properties in AnimX accept multiple formats (like a string, an element, or an array). This guide explains how AnimX understands the different formats you give it.

1. Target Resolution ​

When an API parameter expects a target (target, targets, source, repeller, or bounds), it supports the following formats:

CSS Selectors (string) ​

AnimX automatically uses document.querySelectorAll() to find elements that match your CSS string.

javascript
AnimX.animate('.my-box', { x: 100 });

Raw DOM Elements (Element) ​

You can pass HTML elements directly instead of using strings.

javascript
const box = document.getElementById('hero-box');
AnimX.animate(box, { x: 100 });

NodeLists & Collections ​

NodeLists (like the results from document.querySelectorAll()) are handled automatically.

javascript
const boxes = document.querySelectorAll('.box');
AnimX.animate(boxes, { x: 100 });

Arrays (Array<Element>) ​

You can pass an array of HTML elements. This is helpful if you filter your elements in JavaScript.

javascript
const boxes = Array.from(document.querySelectorAll('.box'));
const visibleBoxes = boxes.filter(b => b.style.opacity !== '0');

AnimX.animate(visibleBoxes, { x: 100 });

Literal Objects (Object) ​

For physics settings like bounds (which act like invisible walls), you can pass a simple object with coordinates instead of an HTML element.

Tip: You don't have to pass all four walls! If you only want a floor, just pass { minY: 500 } and leave the rest out. AnimX handles the missing boundaries gracefully.

Drag the orb!
60 FPS
javascript
Interactable.create('.orb', {
  bounds: { minX: -120, maxX: 120 } // Limits movement to 120px left and right
});

2. Function-Based Values ​

You can use Functions for target properties like x, y, opacity, scale, and any other animatable CSS value.

If you give AnimX a function instead of a number, it will run the function once for each element. This lets you create different values for each element.

Signature ​

javascript
(targetElement, index?, targetsArray?) => number | string
  • targetElement: The specific HTML element being animated.
  • index (optional): The 0-based index of the current element.
  • targetsArray (optional): The full array of all targeted elements.

Examples ​

Dynamic Spacing

60 FPS
javascript
AnimX.animate('.box', {
  // Each box moves 40px further than the last
  x: (targetElement, index) => index * 40, 
});

State-based Values

60 FPS
javascript
AnimX.animate('.card', {
  // Read an HTML data-attribute from the element
  y: (targetElement) => parseFloat(targetElement.dataset.dropHeight)
});

3. Special Keywords ​

Some specific plugins have special keyword strings they accept for certain properties.

'pointer' (Physics Plugins) ​

In physics plugins (like Repulsion or Gravity), you can use the word 'pointer' for the source or repeller. This makes the physics follow your mouse instead of an HTML element.

javascript
Dynamics.applyRepulsion('.dots', {
  source: 'pointer', // Tracks mouse movement
  force: 1000
});