How to animate ScrollTop with @angular/animations?

Question

I'm trying to replicate this animation from Material.io:

To just navigate the height like the click on the first card in the example above is simple. Just animate height attribute. The problem is with the click on the second card where it then pushes the other cards away.

One solution to this is to use scroll to emulate the effect that things get pushed away. So when you click on the item, it both makes it taller by animating the height, but also scroll the view at the same time.

My problem: I can't seem to figure out how to animate scrolls with @angular/animations . I can't use style({ scrollTop: 100 }) , it only allows for CSS attributes according to the documentation .

How do I achieve this? It would be nice if I could do it as part of the animate() animation for maintenance reasons (To keep the whole animation in 1 location in the code), but if it's only possible with a separate method I guess that would be acceptable as well.

Answer 1

I managed to create this, using three Angular animations states : small , big and normal , corresponding to the height of the div :

animations.ts

Here, I used one state variable per div as an example, and I set the each of these states to normal by default. Then, depending on which div I click on, I toggle the states according to what we want to happen : making the div we click on bigger and the others smaller

export const expand = [
  trigger('expand', [
    state('big', style({
      'height': '200px'
    })),
    state('normal', style({
      'height': '100px'
    })),
    state('small', style({
      'height': '50px'
    })),
    transition('* => *', [group([
      animate(1000)
    ]
    )])
  ]),
]

app.component.ts

import { expand } from './animations';

@Component({
  ...
  animations: [expand]
})
export class AppComponent implements OnInit {
  expandState1 = 'normal';
  expandState2 = 'normal';
  expandState3 = 'normal';
  expandState4 = 'normal';
  expandState5 = 'normal';

  ngOnInit() {
    this.resetStates();
  }

  resetStates() {
    this.expandState1 = 'normal';
    this.expandState2 = 'normal';
    this.expandState3 = 'normal';
    this.expandState4 = 'normal';
    this.expandState5 = 'normal';
  }

  toggleShowDiv(divName: string) {
    if (divName === 'div1') {
      if (this.expandState1 === 'normal' || this.expandState1 === 'small') {
        this.setToBig([1]);
        this.setToSmall([2, 3, 4, 5]);
      } else if (this.expandState1 === 'big' || this.expandState1 === 'small') {
        this.resetStates();
      }
    } else if (divName === 'div2') {
      if (this.expandState2 === 'normal' || this.expandState2 === 'small') {
        this.setToBig([2]);
        this.setToSmall([1, 3, 4, 5]);
      } else if (this.expandState2 === 'big') {
        this.resetStates();
      }
    } else if (divName === 'div3') {
      if (this.expandState3 === 'normal' || this.expandState3 === 'small') {
        this.setToBig([3]);
        this.setToSmall([1, 2, 4, 5]);
      } else if (this.expandState3 === 'big') {
        this.resetStates();
      }
    } else if (divName === 'div4') {
      if (this.expandState4 === 'normal' || this.expandState4 === 'small') {
        this.setToBig([4]);
        this.setToSmall([1, 2, 3, 5]);
      } else if (this.expandState4 === 'big') {
        this.resetStates();
      }
    } else if (divName === 'div5') {
      if (this.expandState5 === 'normal' || this.expandState5 === 'small') {
        this.setToBig([5]);
        this.setToSmall([1, 2, 3, 4]);
      } else if (this.expandState5 === 'big') {
        this.resetStates();
      }
    }
  }

  setToSmall(choices: any) {
    for (let i = 0; i < choices.length; i++) {
      switch (choices[i]) {
        case 1:
          this.expandState1 = 'small';
          break;
        case 2:
          this.expandState2 = 'small';
          break;
        case 3:
          this.expandState3 = 'small';
          break;
        case 4:
          this.expandState4 = 'small';
          break;
        case 5:
          this.expandState5 = 'small';
          break;
        default:
          break;
      }
    }
  }

  setToBig(choices: any) {
    for (let i = 0; i < choices.length; i++) {
      switch (choices[i]) {
        case 1:
          this.expandState1 = 'big';
          break;
        case 2:
          this.expandState2 = 'big';
          break;
        case 3:
          this.expandState3 = 'big';
          break;
        case 4:
          this.expandState4 = 'big';
          break;
        case 5:
          this.expandState5 = 'big';
          break;
        default:
          break;
      }
    }
  }
}

And here is the corresponding template :

Each div has the reference to the animation trigger [@expand] and its state.

<div class="wrapper scrollableDiv">
  <div [@expand]="expandState1" (click)="toggleShowDiv('div1')" class="content divA">THIS IS CONTENT DIV 1</div>
  <div [@expand]="expandState2" (click)="toggleShowDiv('div2')" class="content divA">THIS IS CONTENT DIV 2</div>
  <div [@expand]="expandState3" (click)="toggleShowDiv('div3')" class="content divA">THIS IS CONTENT DIV 3</div>
  <div [@expand]="expandState4" (click)="toggleShowDiv('div4')" class="content divA">THIS IS CONTENT DIV 4</div>
  <div [@expand]="expandState5" (click)="toggleShowDiv('div5')" class="content divA">THIS IS CONTENT DIV 5</div>
</div>

Here is a StackBlitz example I made for this : https://stackblitz.com/edit/angular-t47iyy