xperiencebuilderjs

!Thumbnail

xperiencebuilder-web-sdk

$3

install:

``bash
npm install xperiencebuilderjs --save
`

Usage:

`js
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();
});
});
`

$3

#### 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.

$3

> Getting started demo