angular-animations

angular-animations copied to clipboard

Hello,

All animations in the page runs in the same time. how we can run animations on scrolling page.

Example : https://stackblitz.com/edit/angular-ivy-vxaiuz?file=src/app/app.component.ts

Hi @abed-ctrl,

thank you for your question. In the library there are 2 types of animations (from the triggers point of view):

1. triggered by on enter / on leave events (whenever element enters or leaves the DOM), i.e.

<div *ngIf="CONDITION" [@fadeInOnEnter]></div>

2. triggered by state changes (when a boolean variable state changes from false <-> true), i.e.

<div [@rubberBand]="rubberState"></div>

You could use either of those for triggering an animation on scroll events. If you shared a bit more details about your use case, I could try to help.