air-anime

Powered by anime.js library https://animejs.com/ https://github.com/juliangarnier/anime/

Using

Animation function animate(). Gets list of targets and list of animations. Each animation has its name and set of properties.

Template

animate([targets], [["animation_name", data => ({ data_set }), ...keys]]);

Sample

const stream = animate(
  [{ node: "div#block", type: "active" }],
  [
    [
      "default",
      data => ({ duration: 3000, easing: "linear", start: 1000 }),
      [, data => ({ left: 100 })], // empty offset
      [0.5, data => ({ left: data.left, top: data.top })]
    ],
    ["fade-in", data => ({ duration: 1000 }), [1, data => ({ opacity: 1 })]]
  ]
);

const connector = stream.on(({ action }) => {
  // popup on action
});

// animation call
connector({ data: [{ left: 300, top: 100 }, { action: "action_name" }] });

// unsubscribing
connector();

Targets

targets are instance of Object

• node: element(s) from supported list below; have to be only one type
• type: supported "active" for CSS-animated elements or "data" for Text Nodes
• update: function, for "data" type only, gets data object; runs on every animation tick

Target example

  { node: "div#block", type: "active" }

  const text = new Text();
  { node: text, type: "data", update: data => text.textContent = data.value }

  { node: "div#block", type: "sound", resources: [Howl, ...] }

Supported targets

• CSS selector: ".item"
• DOM Node: el.querySelector(".item")
• NodeList: el.querySelectorAll(".item")
• Array: mixed types, e.g. [".el", el.getElementById("#elem")]
• Text Node: new Text("some text")

Data set properties

instance of Object

• duration: full animation duration time (in sec). 0 default (means animation will not be played, last frame applied immediatly)
• easing: easing timing (see this page: https://animejs.com/documentation/#linearEasing for more details). "easeOutCubic" default.
• start: time to start animation from (in sec). 0 default. Cannot be greater or equal animation duration.

Keys properties

Each keyframe is instance of Array

• 0 index (offset): value between 0 and 1 (including) ascending order, refers to CSS @keyframes percentage, where 0 - the very start of animation and 1 - its ending.
• 1 index (properties): function, gets data, returns object of DOM object properties to animate 'till this keyframe, refers to CSS properties.

0-index offset

If the first found offset value is 0 its keyframe properties will be set to DOM object immediatly before animation start. If there is no offset property specified inside all the keyframes, each keyframe duration will be equal to the animation total duration divided by the number of keyframes. If there is no offset property specified inside some of keyframes, missing will be calculated.

1-index properties

Animatable properties, e.g. left, top, opacity, scaleX, color, backgroundColor etc.

Each keyframe may contain unique property classList. It will not be animated and has format of: classList: { "class-name": valid-boolean-value }. The idea is to toggle class-name on animation targets after the end of this keyframe.