# Unable to implement ionic animation in a div inside every slider

**URL:** <https://forum.ionicframework.com/t/unable-to-implement-ionic-animation-in-a-div-inside-every-slider/186381>\
**Category:** Ionic Framework\
**Created:** [April 2, 2020, 5:50am UTC](https://forum.ionicframework.com/t/unable-to-implement-ionic-animation-in-a-div-inside-every-slider/186381 "2020-04-02T05:50:58Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dipankar123](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@dipankar123](https://forum.ionicframework.com/u/dipankar123)\
**Post date:** [April 2, 2020, 5:50am UTC](https://forum.ionicframework.com/t/unable-to-implement-ionic-animation-in-a-div-inside-every-slider/186381/1 "2020-04-02T05:50:58Z")

</div>

Dear all,  
I am trying to implement ionic animation api inside a div. this div is placed in every ion-slide  
ionic animation working in 1st ion-slide but not working from 2nd ion-slide

here is my code  
HTML

```auto
<ion-slides #slider [options]="slideOpts" effect='fade' (ionSlideDidChange)='slideChanged()'>
    <ion-slide class="slider" *ngFor="let item of slideImages" [ngStyle]="{'background-image': 'url('+item.image+')'}">
      <div class="slide-background">
        <div class="info-on" id="info"
        [innerHTML]="domSanithize.bypassSecurityTrustHtml(item.info)" #animatedInfo>
      </div>
      </div>
    </ion-slide>
  </ion-slides>

```

page.ts

```auto
slideImages = [
    {
      info: 'this is <br><span style=\'font-size: 3rem;font-weight: 900\'>First information</span><br> click here',
      image: '../../../assets/IMG/frstInfo.jpg',
    },
    {
      info: 'this is <br><span style=\'font-size: 3rem;font-weight: 900\'>Second information</span><br> click here',
      image: '../../../assets/IMG/2ndInfo.jpg',
    },
    {
      info: 'this is <br><span style=\'font-size: 3rem;font-weight: 900\'>Thirs information</span><br> click here',
      image: '../../../assets/IMG/3rdInfo.jpg',
    },
]

ngOnInit() {
    this.menu.enable(false);
    setTimeout(() => {
      this.playAnimation(); //<--animation working
    }, 700);
  }

playAnimation() {
    console.log('started animation');
    this.animation = Animation;
    this.animation = this.animationCtrl.create()
      .addElement(this.animatedInfo.nativeElement)
      .duration(1300)
      .fromTo('left', '-10px', '10px')
      .fromTo('opacity', '0', '1');

    this.animation.play();
}

slideChanged() {
    this.playAnimation()// not working
  }

```

please help  
thanks in advance