# Animation

## animateTo():

I2Djs provides easy syntax to perform animation transitions of one or more elements from the current state to the target state in a given duration(ms).

```
circleNode.animateTo({
    duration: 500,
    loop: Infinity,
    ease: 'easeInOutSin',
    direction: 'alternate',
    attr: {
        r: 200
    },
    style: {
        fillStyle: '#00ff00'
    }
});
```

* **Duration \[***optional***] -** The number of milliseconds animation takes place to complete. The default is 0.
* **Ease \[***optional***] -** The rate of the animation's change over time. Accepts the predefined values - **'easeOutQuad', 'easeInQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInSin', 'easeOutSin', 'easeInOutSin' 'bounce', 'linear', 'elastic'** and custom. Defaults to 'linear'.
* **Loop \[***optional***] -** The Number of times animation to be performed. Defaults to 1.
* **Direction \[***optional***] -** Animation direction can be controlled based on the following values - **'normal'** (forward) , **'reverse'** (backward) and **'alternate'** (direction changes after every iteration)
* **attr \[***optional***] -** target attributes. Every attribute will be animated from the current state to the specified state in the specified duration. Object with attribute (key, value) pairs.
* **Style \[***optional***] -** The object to specify the target state of the Style properties. Every style property will be animated from the current state to the specified state in the specified duration. Object with attribute (key, value) pairs.
* **end \[***optional***] -** The specified function will be called on completion of the animation.

```
          circle.animateTo({
               duration : 1000,
               ease : 'easeInOutSin',
               loop : 10,
               direction : 'alternate'
               attr : {
                   r: 100
               },
               style : {
                   opacity: 0
               },
               end: function(){
                   this.remove();
               }
           })
```

## .animatePathTo()

API to perform Path Animations.

Examples: [Path Animato](https://i2djs.github.io/I2Djs/examples/canvas/pathAnimator.html)

```
#.createEl({
	el: 'path',
	attr: {
		d: 'M366.2,204.2 c-9.8,0 -15,-5.6 -15,-15.1 V77.2 h-85 v28 h19.5 c9.8,0 8.5,2.1 8.5,11.6 v72.4 c0,9.5 0.5,15.1 -9.3,15.1 H277 h-20.7 c-8.5,0 -14.2,-4.1 -14.2,-12.9 V52.4 c0,-8.5 5.7,-12.3 14.2,-12.3 h18.8 v-28 h-127 v28 h18.1 c8.5,0 9.9,2.1 9.9,8.9 v56.1 h-75 V53.4 c0,-11.5 8.6,-13.3 17,-13.3 h11 v-28 H2.2 v28 h26 c8.5,0 12,2.1 12,7.9 v142.2 c0,8.5 -3.6,13.9 -12,13.9 h-21 v33 h122 v-33 h-11 c-8.5,0 -17,-4.1 -17,-12.2 v-57.8 h75 v58.4 c0,9.1 -1.4,11.6 -9.9,11.6 h-18.1 v33 h122.9 h5.9 h102.2 v-33 H366.2 z'
	},
	style: {
		lineWidth: 10,
		strokeStyle: '#f00000',
		shadowColor: 'black',
		lineCap: 'round'
	}
})
	.animatePathTo({
		duration: 10000,
		loop: 10,
		ease: 'linear',
		direction: 'alternate'
	});
```

## .morphTo()

I2Djs provides a special API to perform Path Morphing. This API is specific to the Path element. It accepts target 'd' attribute value.

Examples:  [Path Morph Animator](https://i2djs.github.io/I2Djs/examples/canvas/pathMorph.html)

```
renderer.createEl({
	el: 'path',
	attr: {
		d: 'M100,250 C100,100 400,100 400,250 z'
	},
	style: {
		lineWidth: '3',
		strokeStyle: '#f00000'
	},
	bbox: false
})
	.animateTo({
		duration: 1000,
		loop: 100,
		direction: 'alternate',
		// loop:100,
		attr: {
			d: 'M100,250 C500,66 -1,48 400,250'
		}
	});
```

### #.interrupt()

It interrupts the transition on the context node. Used in case if we need to kill the animation on a specific node. It's a method on Node as well as NodeCollection.


---

# 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://nswamy14.gitbook.io/i2djs-v4/api-reference/animation.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.