How to create advanced horizontal list animation in Angular

I’m looking for some help with an advanced animation that I want to create. There is a gif to (hopefully) make it clearer what it is that I want if it’s not clear by the next paragraph.

Think of the interface of rows with each 5 items. In the application the user has the ability to remove an item by clicking on it. When the user does so, every item after the clicked item should move a spot to the left. If an item is already in the left most spot, the item should fit in the row above. Whenever an item moves rows, the user will see the item move left out of screen, but move into the screen at the same time in the row above the row it left.

The gif to explain it in a visual: (user taps on ‘8’ to hide it and the user taps on ‘1’ to hide it which means the items after the clicked items should animate to a different spot)

enter image description here

The array that will be used is quite extensive already so I don’t want to change much about that array. At first I was thinking of modifying that array into an array of arrays where you can see the first arrays as the row. The markup would be like this:

<section *ngFor="let blockRow of orderedBlocks" class="block-row">
  <article []=""  *ngFor="let block of blockRow" class="block" [style.backgroundColor]="block.bgColor">
    <p [innerHTML]="'ID = ' +"></p>
    <ion-button (click)="completeBlock(">complete block</ion-button>

Which would create the following layout: layout of markup

Adding the animations with:

animations: [
trigger('items', [
  transition(':enter', [
    style({ transform: 'translateX(-100%)' }),
    animate('.5s ease-in-out',
      style({ transform: 'translateX(0) }))
  transition(':leave', [
    style({ transform: 'translateX(0)'}),
    animate('.5s ease-in-out',
      style({ transform: 'translateX(-100%)' }))

Would make it so everything changes like that on every change instead of the individual items.

However like I said, I don’t like this one. Whenever something changes within the item (which is possible in the real application) every single item will re-render since we need to convert it to this special array again. Nope, doesn’t sound like a good thing performance wise to do this every single change.

Alright, maybe the modulo operator would do the trick so we don’t have to modify the original array? I was unable to figure this out as well.

I’m able to use Angular Animations or even gsap, but I’d love it if this was possible without any mutations on the array really. Is it possible and if it is, how?

20 thoughts on “How to create advanced horizontal list animation in Angular”

  1. When an item is clicked, you will need to either

    1. Absolutely position all of your elements or
    2. Wrap all of the items in a row in a container that will be animated.

    Then you will need to duplicate all of the items that are going to wrap to a different line (either to the container of the previous row or absolutely position it where it needs to be).

    Then you need to animate each of the containers (or absolutely positioned elements) that you want to animate to the left by one box (and spacing around it) amount.

    It’d also be much easier if you disable the ability to click on a second box while the previous animation is still going.


Leave a Comment