Ionic animation in ionic 5 ion-list

I’m having trouble doing some simple animation with ionic v5. This is my html

<div *ngIf="products.length > 0">
  <ion-list *ngFor="let pro of products" class="list">
    <ion-item>
      <ion-grid>
        <ion-row>
          <ion-col>
            // Making it simpler
          </ion-col>
        </ion-row>
      </ion-grid>
   </ion-item>
 </ion-list>
</div>

And this is ts

ionViewDidEnter() {
    const animation = this.animationCtrl.create()
      .addElement(document.querySelectorAll('.list'))
      .duration(1200)
      .iterations(1)
      .keyframes([
        { offset: 0, transform: 'translateY(-75px)', opacity: '0' },
        { offset: 0.3, transform: 'translateY(35px)', opacity: '0.5' },
        { offset: 1, transform: 'translateY(0px)', opacity: '1' }
      ]);

    animation.play();
  }

Now the problem is when the page shows whole list items animate at once while I want to animate each ion-item one by one. If I use document.querySelector instead of document.querySelectorAll only first ion-item got animated.

Please any help will be appreciated.

Hi!

What I did to acheive this was to add a delay in the loop and in each iteration add a little bit more of delay to it.

let delay: number = 0;

    if(newMessageAnimElems.length) {

      for (let index = 0; index < newMessageAnimElems.length; index++) {

        const element = newMessageAnimElems[index];

        const animation: Animation = this.animationCtrl.create()

          .addElement(element)

          .duration(1400)

          .iterations(Infinity)

          .delay(delay)

          .keyframes([

            { offset: 0, opacity: '0.1', transform: 'scale(.1)' },

            { offset: 0.4, opacity: '0.6', transform: 'scale(1.2)' },

            { offset: 0.8, opacity: '0.4', transform: 'scale(.1)' },

            { offset: 1, opacity: '0.3', transform: 'scale(.1)' },

          ]);  

        delay += 320;

        animation.play();

      }   

    }

Hope this solve your issue… It could be improved for sure, will keep an eye on this thread if someone has a better way :slight_smile: