```
**Note:** If you want to use any element other than `img`, the `animStart` element and `animEnd` must be identical in font-*, width, height and text-align, otherwise the animation will not work well.
## 3. Multiple Items as 'animStart'
When you have a list of items in the first page, it is important to pass the element index before navigating to the second page, so animation can be played correctly.
Also add `animItem` attribute to animated element.
Page1.html:
```html
```
Pgae1.ts:
```javascript
import {ConnectedAnimationService} from 'ng-ionic-connectedanim';
export class Page1 {
constructor(private navCtrl: NavController,
private connectedAnimationService: ConnectedAnimationService) {
}
pushPage(itemIndex) {
// pass item index
this.connectedAnimationService.setItemIndex(itemIndex, this);
// then push page2
this.navCtrl.push('Page2');
}
}
```
Page2.html:
```html
```
## 4. Manually play animation:
This is useful for elements in the same page.
set autoFire to false in `animOptions`:
```html
```
```javascript
export class Page {
constructor(private animationService: ConnectedAnimationService) {
}
openModal() {
// first show your modal
// Make sure its 'style.display' is not 'none' before playing animation.
//let itemIndex = 0; /* Send element index if you are using ngFor */
this.animationService.playAnimations(this/*, itemIndex*/);
// or play a specific animation by its name
//this.animationService.playAnimation('animation1'/*, itemIndex*/);
}
closeModal() {
this.animationService.playAnimationBack(this);
// then hide the modal...
}
}
```
# Options
You can pass animation options to `animStart' element.
```html
```
#### Options:
| Option | Desc. |
| ------ | ------- |
| autoFire | Set autoFire to false to manually play the animation by calling animationService.playAnimation(), default is true. |
| type | Animation type, e.g.: 'ease', 'ease-in'... |
| delay | Animation delay. |
| duration | Animation duration. |
| targetRect | Target element ('animEnd' element) position or offset. |
---
_Source: https://npm.io/package/ng-ionic-connectedanim · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._