Ionic animation in ionic 5 ion-list

Ionic Framework Ionic Angular
1

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.

2

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:

3

Thank you @Somebradly!

I did some improvements in your aproach.

/**
   * Fade in animation for ion-item
   * @selector {string} Use CSS class defined in ion-item
   * @duration {number} Duration of each animation
   * @delayBetweenItems {number} Delay between each item animation
   */
  animateList(selector, duration, delayBetweenItems): void{
    console.log('animateList');
    const animationArray: Animation[] = [];
    const elemArray = document.querySelectorAll(selector);
    for (let i = 0; i <= elemArray.length; i++){
      // console.log('aqui: ', elemArray[i]);
      const animation: Animation = createAnimation('')
      .addElement(elemArray[i])
      .easing('cubic-bezier(0, 0.55, 0.45, 1)')
      .duration(duration)
      .delay(i * delayBetweenItems)
      .fromTo('opacity', '0', '1')
      .fromTo('width', '0', '100%');
      animationArray.push(animation);
    }
    animationArray.forEach((animation: Animation) => {
      animation.play();
    });
  }