simple sdk to animate your svg on web created using xperiencebuilder
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();
});
});
#### 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.false
- Type: Boolean
- Example: loop
- : Specifies whether the animation should loop.true`
- Type: Boolean
- Example:
#### 4. progressCallbackFunction
- Type: Function
- Required: No
- Description: This function will be called with progress information of animation.