Node:

install:

npm install xperiencebuilderjs --save

Usage:

import AnimationController from "xperiencebuilderjs";
const progressCallbackFunction = (progress) => {
  // progress from 1 to 100 in percentage
};
const animation = new AnimationController(
  "svgContainer",
  "assets/example.json",
  {
    autoplay: false,
    loop: true,
  },
  progressCallbackFunction
);
animation.load().then((timeline) => {
  console.log(timeline.duration);
  timeline.seek(2000);
  document.getElementById("play").addEventListener("click", function () {
    timeline.play();
  });
  document.getElementById("pause").addEventListener("click", function () {
    timeline.pause();
  });
});

Parameters and Type Explanation

1. containerId

• Type: String
• Required: Yes
• Description: Specifies the container where the SVG will be rendered.
• Example: "svgContainer"

2. animationJSON

• Type: String or JSON

• Required: Yes

• Description: Path to the JSON file exported from xperiencebuilder or raw JSON object of the animation data.

• Example (JSON File Path): "assets/example.json"

• Example (JSON):

  {
  "image": {
    "animation": {
      "x": [
        {
          "value": "-=270.5011918704664",
          "duration": 1000,
          "delay": 0,
          "easing": "cubicBezier(0.25,0.1,0.25,1)",
          "endDelay": 0
        }
      ],
      "y": [
        {
          "value": "-=255.47818066474565",
          "duration": 1000,
          "delay": 0,
          "easing": "cubicBezier(0.25,0.1,0.25,1)",
          "endDelay": 0
        }
      ]
    },
    "properties": {
      "x": 533.5,
      "y": 412.5,
      "opacity": 1,
      "fill": "#ffffff"
    }
  }
  }
  

3. timelineRules

• Type: Object
• Required: Yes
• Description: An object containing animation rules.
  • autoplay: Specifies whether the animation should autoplay.
    • Type: Boolean
    • Example: false
  • loop: Specifies whether the animation should loop.
    • Type: Boolean
    • Example: true

4. progressCallbackFunction

• Type: Function
• Required: No
• Description: This function will be called with progress information of animation.

Demo

Getting started demo