List Items Animation for Ionic Framework

Apply animation to list items after scrolling up and down.

Setup

1. install via npm:

npm i ng-ionic-listitemsanim@latest --save

2. Import ListItemsAnimModule in you module

import { ListItemsAnimModule } from "ng-ionic-listitemsanim";

@NgModule({
    imports: [
        ListItemsAnimModule,
        ....
    ]
})
export class AppModule { }

Usage Example

Add listItemsAnim directive to the list. Must be used with [virtualScroll], otherwise will not work.

Add listItemAnim directive to the item.

<ion-list [virtualScroll]="items" listItemsAnim approxItemHeight="130px">
    <button ion-item listItemAnim *virtualItem="let item">
        <img [src]="item.image" width="70">
        <h2>{{item.title}}</h2>
    </button>
</ion-list>

And style your element's animation:

ion-list {
    /* modify list's style */
    background-color: #f5f5f5 !important;
}

.item {
    /* modify item's style */
    background-color: transparent;
    padding: 0;
    margin: 5px 0;

    /*
    Don't use transition on .item[listItemAnim], especially for 'transform' property, otherwise will see unexpected result.
     transition: all 200ms ease-out;
    */

    .item-inner {
        /* modify item's style */
        padding-left: 16px;
        background-color: #fff;
        
        /* actual animation styles */
        transition: all 200ms ease;
    }

    /* actual animation styles */
    &.anim-listitem-hidden-top {
        .item-inner {
            /* Note that the animation will not be noticeable if the parent item (.item) wasn't transparent. */
            opacity: 0;
            transform: translate3d(-10px, -10px, 0) scale(.8);
        }
    }
    &.anim-listitem-hidden-bottom {
        .item-inner {
            opacity: 0;
            transform: translate3d(10px, 10px, 0) scale(.8);
        }
    }
    &.anim-listitem-visible {
        /* optional extra class when element become visible */
    }

    /* you can specify a delay for each item according to its position in the visible area of the list */
    &.anim-listitem-0 {
        transition-delay: 0ms !important;
        .item-inner {
            transition-delay: 0ms !important;
        }
    }
    &.anim-listitem-1 {
        transition-delay: 100ms !important;
        .item-inner {
            transition-delay: 100ms !important;
        }
    }
    &.anim-listitem-2 {
        transition-delay: 200ms !important;
        .item-inner {
            transition-delay: 200ms !important;
        }
    }
    &.anim-listitem-3 {
        transition-delay: 300ms !important;
        .item-inner {
            transition-delay: 300ms !important;
        }
    }
    &.anim-listitem-4 {
        transition-delay: 400ms !important;
        .item-inner {
            transition-delay: 400ms !important;
        }
    }
    &.anim-listitem-5 {
        transition-delay: 500ms !important;
        .item-inner {
            transition-delay: 500ms !important;
        }
    }
    &.anim-listitem-6 {
        transition-delay: 600ms !important;
        .item-inner {
            transition-delay: 600ms !important;
        }
    }
    &.anim-listitem-7 {
        transition-delay: 700ms !important;
        .item-inner {
            transition-delay: 700ms !important;
        }
    }
    &.anim-listitem-8 {
        transition-delay: 800ms !important;
        .item-inner {
            transition-delay: 800ms !important;
        }
    }
    &.anim-listitem-9 {
        transition-delay: 900ms !important;
        .item-inner {
            transition-delay: 900ms !important;
        }
    }
    ...
}

Options

You can add offset to the visible area of the list by passing options:

<ion-list [virtualScroll]="items" [listItemsAnim]="{ offsetTop: 60, offsetBottom: 60 }">
    ...
</ion-list>