# Animate

you can do animation in two ways

1. With the splite system, you can split an image into several animations.
2. You set the desired property of the object to do the things in the array.

## 1. Splite system

{% code overflow="wrap" %}

```javascript
var mybestanimate = [
  {
    image: "test.png",//file name
    time: 100,//how long will it stay
    position: { x: 10, y: 5 },//starting position
    scale:{x:50,y:45}//ending position
  },
  {
    image: "test.png",//file name
    time: 100,//how long will it stay
    position: { x: 58, y: 5 },//starting position
    scale:{x:50,y:45}//ending position
  }
];
```

{% endcode %}

### Add, Remove and Update

{% code title="Component" overflow="wrap" %}

```javascript
{
animate:mybestanimate // add animation
animate:newanimation //change animation
animate:[] // remove animation
}
```

{% endcode %}

<figure><img src="https://644134079-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAoN3PvLitJVdWdsmwATH%2Fuploads%2FZbnLC2Hu4TJRbIfqojas%2Fsplitsystem.png?alt=media&#x26;token=107f4c79-b6aa-4c16-9d1a-7a4170e9146f" alt=""><figcaption></figcaption></figure>

The top left part in the picture is position.&#x20;

The lower right part of the picture becomes scale.

### To understand that the animation is finished, you can use

```javascript
animateout = (obj,data) =>{
  console.log(obj,data)//player1 []
}
```

**This system can be confusing so method 2 might be better for you**

## 2. Animator

{% code overflow="wrap" %}

```javascript
Animator(
  true,//Add or remove
  "player1",//Obje
  ["#ddd","yellow","blue"],//Array
  "color",//Change type
  1000,//Time to build the next array (not total)
  false//Loop
)
```

{% endcode %}

```javascript
//Another example, you can edit most things you want.
Animator(
  true,//Add or remove
  "player1",//Obje
  ["test1.png","test2.png","test3.png"],//Array
  "image",//Change type
  200,//Time to build the next array (not total)
  true//Loop
)
```

{% hint style="info" %}
In order to use it, it is necessary to run the "eap" module in your project.
{% endhint %}

### For remove

{% code overflow="wrap" lineNumbers="true" %}

```javascript
Animator(false,"player1")
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://electoriaengine.gitbook.io/api/components/component/animate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.