filipows/angular-animations

:sparkles: Easy, Reusable Animation Utility library for Angular

Angular-Animations Utility Library

Easy, Reusable Animation Utility library for Angular Apps.

Angular Animations utility library is a collection of reusable and parametrized animations build for Angular 15+ that can be used in a declarative manner. It implements all animations from animate.css (and more). Works both with AOT and JIT compilations.

Quick links

Demo | StackBlitz Demo | StackBlitz Base Template

Table of Contents

• Getting Started
  • Prerequisites
• Installation
• Usage
  • Animations on enter / on leave
  • Animations with state or triggered by state changes
  • Parametrized animations
  • Animation Callbacks
    • Loop animation
    • Chain animations
• Available Animations and Parameters
• Running Demo App
• Authors
• License

Getting Started

Prerequisites

Make sure you import BrowserAnimationModule in your angular app.

 npm i @angular/animations@latest --save

Import BrowserAnimationsModule from @angular/platform-browser/animations in your root NgModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

Installation

 npm i angular-animations --save

Usage

Animations on enter / on leave

Animations on enter / on leave are triggered in a moment when element is added to or removed from the dom. Basic example would be with *ngIf template directive.

Import animation functions that you want to use and add them to animations in a component decorator:

import { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animations';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  animations: [
    fadeInOnEnterAnimation(),
    fadeOutOnLeaveAnimation()
  ]
})

and use them in the template:

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

Animations with state or triggered by state changes

These animations take as an input a boolean value. Some animations, like Attention Seekers are triggered depending on the direction parameter; bidirectional (<=>) will be triggered by any state change, unidirectional (=>) will be triggered only when state changes from false to true.

All in and out animations are triggered by changes of state from false to true. Animations that preserve state, like collapse or rotate display default state when the value is false and transition to end state when the value is true

import { collapseAnimation, rubberBandAnimation } from 'angular-animations';

@Component({
  ...
  animations: [
    rubberBandAnimation(),
    collapseAnimation(),
  ]
})

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

Parametrized animations

All animations are open for customizations. All of them have parameters: duration and delay, and if it make sense for an animation, additional ones: translate, degrees or scale.

Parameters can be used either in a component decorator or dynamically in a template.

In a decorator:

@Component({
  ...
  animations: [
    fadeInUpOnEnterAnimation({ anchor: 'enter', duration: 1000, delay: 100, translate: '30px' }),
    bounceOutDownOnLeaveAnimation({ anchor: 'leave', duration: 500, delay: 200, translate: '40px' })
  ]
})

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

Animations like Attention Seekers can take a direction parameter (cannot be in template)

@Component({
  ...
  animations: [
    // triggers when STATE changes from false to true
    rubberBandAnimation({anchor: 'rubber', direction: '=>', duration: 500})
  ]
})

<div [@rubber]="STATE"></div>

In a template (providing option for dynamic changes):

@Component({
  ...
  animations: [
    fadeInUpOnEnterAnimation({ anchor: 'enter'),
  ]
})

<div *ngIf="CONDITION" [@enter]="{ value: '', params: { duration: 300, delay: 0, translate: '30px' } }" [@leave]></div>
<div *ngIf="CONDITION" [@enter]="{ value: '', params: { duration: 300, delay: 100, translate: '40px } }" [@leave]></div>

With parameters in a template, we can for example achieve staggering animations:

<div *ngFor="let i of [1,2,3]" [@enter]="{ value: '', params: { delay: i * 100 } }"></div>

Animation Callbacks

Each animation supports start and done callbacks to setup hook methods that get called at the start or end of animations. We can add callbacks with the syntax (@trigger.start) or (@trigger.done), where trigger is the name of the animation trigger/anchor being used.

<div [@fadeIn]="animationState" (@fadeIn.start)="animStart($event)" (@fadeIn.done)="animDone($event)"></div>

The callbacks receive an AnimationEvent that contains the following properties: fromState phaseName("start" or "done"), toState and totalTime

import { AnimationEvent } from '@angular/animations';

//...

animStart(event: AnimationEvent) {
  console.log('Animation Started', event);
}

animDone(event: AnimationEvent) {
  console.log('Animation Ended', event);
}

You can find more information about Animation callbacks in the Angular docs

Loop animation

You can achieve looped animation by using done callback. Define a variable that triggers animation and toggle it when animation done callback is called:

<div [@bounce]="animState" (@bounce.done)="animDone()"></div>

and in the component:

  animState = false;

  animDone() {
    this.animState = !this.animState
  }

Example: simple infinite loop animation
Example: repeat animation N times after clicking the button
Example: repeat animation until certain event occurs

Chain animations

You can chain animations (e.g. wait for the first animation to finish before the second one starts) by using the done callback. Example: OnEnter/OnLeave chained animations

Available Animations and Parameters

All animations have duration and delay params.

	Animation	Default Anchor	OnEnter/OnLeave	Additional Params
Attention Seekers
	bounce	[@bounce]	[@bounceOnEnter]
	flash	[@flash]	[@flashOnEnter]
	pulse	[@pulse]	[@pulseOnEnter]	scale (default: 1.05)
	rubberBand	[@rubberBand]	[@rubberBandOnEnter]
	shake	[@shake]	[@shakeOnEnter]	translate (default: '10px')
	swing	[@swing]	[@swingOnEnter]
	tada	[@tada]	[@tadaOnEnter]
	wobble	[@wobble]	[@wobbleOnEnter]
	jello	[@jello]	[@jelloOnEnter]
	heartBeat	[@heartBeat]	[@heartBeatOnEnter]	scale (default: 1.3)
	headShake	[@headShake]	[@headShakeOnEnter]
Bouncing entrances
	bounceIn	[@bounceIn]	[@bounceInOnEnter]
	bounceInDown	[@bounceInDown]	[@bounceInDownOnEnter]	translate (default: '3000px')
	bounceInLeft	[@bounceInLeft]	[@bounceInLeftOnEnter]	translate (default: '3000px')
	bounceInRight	[@bounceInRight]	[@bounceInRightOnEnter]	translate (default: '3000px')
	bounceInUp	[@bounceInUp]	[@bounceInUpOnEnter]	translate (default: '3000px')
Bouncing exits
	bounceOut	[@bounceOut]	[@bounceOutOnLeave]
	bounceOutDown	[@bounceOutDown]	[@bounceOutDownOnLeave]	translate (default: '2000px')
	bounceOutLeft	[@bounceOutLeft]	[@bounceOutLeftOnLeave]	translate (default: '2000px')
	bounceOutRight	[@bounceOutRight]	[@bounceOutRightOnLeave]	translate (default: '2000px')
	bounceOutUp	[@bounceOutUp]	[@bounceOutUpOnLeave]	translate (default: '2000px')
Fading entrances
	fadeIn	[@fadeIn]	[@fadeInOnEnter]
	fadeInDown	[@fadeInDown]	[@fadeInDownOnEnter]	translate (default: '100%')
	fadeInDownBig	[@fadeInDownBig]	[@fadeInDownBigOnEnter]	translate (default: '2000px')
	fadeInLeft	[@fadeInLeft]	[@fadeInLeftOnEnter]	translate (default: '100%')
	fadeInLeftBig	[@fadeInLeftBig]	[@fadeInLeftBigOnEnter]	translate (default: '2000px')
	fadeInRight	[@fadeInRight]	[@fadeInRightOnEnter]	translate (default: '100%')
	fadeInRightBig	[@fadeInRightBig]	[@fadeInRightBigOnEnter]	translate (default: '2000px')
	fadeInUp	[@fadeInUp]	[@fadeInUpOnEnter]	translate (default: '100%')
	fadeInUpBig	[@fadeInUpBig]	[@fadeInUpBigOnEnter]	translate (default: '2000px')
Fading exits
	fadeOut	[@fadeOut]	[@fadeOutOnLeave]
	fadeOutDown	[@fadeOutDown]	[@fadeOutDownOnLeave]	translate (default: '100%')
	fadeOutDownBig	[@fadeOutDownBig]	[@fadeOutDownBigOnLeave]	translate (default: '2000px')
	fadeOutLeft	[@fadeOutLeft]	[@fadeOutLeftOnLeave]	translate (default: '100%')
	fadeOutLeftBig	[@fadeOutLeftBig]	[@fadeOutLeftBigOnLeave]	translate (default: '2000px')
	fadeOutRight	[@fadeOutRight]	[@fadeOutRightOnLeave]	translate (default: '100%')
	fadeOutRightBig	[@fadeOutRightBig]	[@fadeOutRightBigOnLeave]	translate (default: '2000px')
	fadeOutUp	[@fadeOutUp]	[@fadeOutUpOnLeave]	translate (default: '100%')
	fadeOutUpBig	[@fadeOutUpBig]	[@fadeOutUpBigOnLeave]	translate (default: '2000px')
Flippers
	flip	[@flip]	[@flipOnEnter]
	flipInX	[@flipInX]	[@flipInXOnEnter]	degrees (default: 90)
	flipInY	[@flipInY]	[@flipInYOnEnter]	degrees (default: 90)
	flipOutX	[@flipOutX]	[@flipOutXOnLeave]	degrees (default: 90)
	flipOutY	[@flipOutY]	[@flipOutYOnLeave]	degrees (default: 90)
Light speed
	lightSpeedIn	[@lightSpeedIn]	[@lightSpeedInOnEnter]	translate (default: '100%')
	lightSpeedOut	[@lightSpeedOut]	[@lightSpeedOutOnLeave]	translate (default: '100%')
Rotating entrances
	rotateIn	[@rotateIn]	[@rotateInOnEnter]	degrees (default: -200)
	rotateInDownLeft	[@rotateInDownLeft]	[@rotateInDownLeftOnEnter]	degrees (default: -45)
	rotateInDownRight	[@rotateInDownRight]	[@rotateInDownRightOnEnter]	degrees (default: 45)
	rotateInUpLeft	[@rotateInUpLeft]	[@rotateInUpLeftOnEnter]	degrees (default: 45)
	rotateInUpRight	[@rotateInUpRight]	[@rotateInUpRightOnEnter]	degrees (default: -90)
Rotating exits
	rotateOut	[@rotateOut]	[@rotateOutOnLeave]	degrees (default: 200)
	rotateOutDownLeft	[@rotateOutDownLeft]	[@rotateOutDownLeftOnLeave]	degrees (default: 45)
	rotateOutDownRight	[@rotateOutDownRight]	[@rotateOutDownRightOnLeave]	degrees (default: -45)
	rotateOutUpLeft	[@rotateOutUpLeft]	[@rotateOutUpLeftOnLeave]	degrees (default: -45)
	rotateOutUpRight	[@rotateOutUpRight]	[@rotateOutUpRightOnLeave]	degrees (default: -90)
Sliding entrances
	slideInUp	[@slideInUp]	[@slideInUpOnEnter]	translate (default: '100%')
	slideInDown	[@slideInDown]	[@slideInDownOnEnter]	translate (default: '100%')
	slideInLeft	[@slideInLeft]	[@slideInLeftOnEnter]	translate (default: '100%')
	slideInRight	[@slideInRight]	[@slideInRightOnEnter]	translate (default: '100%')
Sliding exits
	slideOutUp	[@slideOutUp]	[@slideOutUpOnLeave]	translate (default: '100%')
	slideOutDown	[@slideOutDown]	[@slideOutDownOnLeave]	translate (default: '100%')
	slideOutLeft	[@slideOutLeft]	[@slideOutLeftOnLeave]	translate (default: '100%')
	slideOutRight	[@slideOutRight]	[@slideOutRightOnLeave]	translate (default: '100%')
Zooming entrances
	zoomIn	[@zoomIn]	[@zoomInOnEnter]
	zoomInDown	[@zoomInDown]	[@zoomInDownOnEnter]
	zoomInLeft	[@zoomInLeft]	[@zoomInLeftOnEnter]
	zoomInRight	[@zoomInRight]	[@zoomInRightOnEnter]
	zoomInUp	[@zoomInUp]	[@zoomInUpOnEnter]
Zooming exits
	zoomOut	[@zoomOut]	[@zoomOutOnLeave]
	zoomOutDown	[@zoomOutDown]	[@zoomOutDownOnLeave]
	zoomOutLeft	[@zoomOutLeft]	[@zoomOutLeftOnLeave]
	zoomOutRight	[@zoomOutRight]	[@zoomOutRightOnLeave]
	zoomOutUp	[@zoomOutUp]	[@zoomOutUpOnLeave]
Specials
	hinge	[@hinge]	[@hingeOnLeave]
	jackInTheBox	[@jackInTheBox]	[@jackInTheBoxOnEnter]
	rollIn	[@rollIn]	[@rollInOnEnter]	degrees (default: -120), translate (default: '-100%')
	rollOut	[@rollOut]	[@rollOutOnLeave]	degrees (default: 120), translate (default: '100%')
Other
	collapse	[@collapse] [@collapseHorizontally]	[@expandOnEnter] [@collapseOnLeave] [@fadeInExpandOnEnter] [@fadeOutCollapseOnLeave] [@expandRightOnEnter] [@collapseLeftOnLeave] [@fadeInExpandRightOnEnter] [@fadeOutCollapseLeftOnLeave]
	rotate	[@rotate]	-	degrees (default: 90)
	hueRotate	[@hueRotate]	-

Running Demo App

npm install
npm start

Authors

• Chris Filipowski - filipows

License

This project is licensed under the MIT License - see the LICENSE file for details

angular-animations's Issues

Angular 9 issue: could not resolve angular-animations relative to [object Object]

Hello,

I have just stumbled across your library and it looks amazing!

However I am using Angular 9 and am receiving an error in my code:

import { pulseAnimation } from 'angular-animations';

@Component({
  selector: 'app-credentials-dropdown',
  templateUrl: './credentials-dropdown.component.html',
  animations: [
    pulseAnimation()
  ]

The compile-time error is:

Error during template compile
could not resolve angular-animations relative to [object Object]

Any ideas? I am wondering if your library supports Angular 9.

Do note that if I stop "ng serve" and restart it, effectively recompiling the app, then this error goes away. However as soon as I then try to use an additional animation, the error comes back again, and I have to kill ng serve again.

So its not a showstopper - I am just worried that it might be a sign of something more sinister going on...

ERROR in node_modules/angular-animations/bouncint-exits/bounce-out-down.animation.d.ts

ERROR in node_modules/angular-animations/bouncint-exits/bounce-out-down.animation.d.ts(11,43): error TS1005: ',' expected.

Comment line 11 and run...

import { AnimationTriggerMetadata } from '@angular/animations';
import { IAnimationOptions } from '../common/interfaces';
export interface IBounceOutDownAnimationOptions extends IAnimationOptions {
/**
* Translate, possible units: px, %, em, rem, vw, vh
*
* Default: 2000px
*/
translate?: string;
}
export declare const bounceOutDown: import("@angular/animations/src/animation_metadata").AnimationReferenceMetadata;
export declare function bounceOutDownAnimation(options?: IBounceOutDownAnimationOptions): AnimationTriggerMetadata;
export declare function bounceOutDownOnLeaveAnimation(options?: IBounceOutDownAnimationOptions): AnimationTriggerMetadata;

i want text bounce again and again

This is my code. I want Book Event text bounce again and again contentiously

animations:[
bounceOnEnterAnimation({anchor:'titlebounce'})
]
<h3 [@titlebounce] > Book Event </h3>
How to fix?

Scale on bounce animation not working

Hello, I cannot get the scale option to work with the bounce animation:

I tried it via:
bounceAnimation({scale: 0.5})
Fails with:
Argument of type '{ scale: number; }' is not assignable to parameter of type 'IAnimationOptions'. Object literal may only specify known properties, and 'scale' does not exist in type 'IAnimationOptions'. [2345]

as well as:
[@bounce]="{value: wrongInput, params:{scale: 0.5}}"
Then the animation plays but, scale has no effect

Am I doing smth wrong?

No animation is show

Hi all,
I am starting using the library in my project.
Everythng is setup like described in the documentation (imports and dependencies), but when a try to use any of the animations, nothing happens, with no error in my console.

Can you please help me debugging the issue?

how do I group animations using the library

Is it possible to use these animations in group function ? Pardon the brevity of the question as I am quite new to angular animations

Thanks

How to achieve the following with your library?

// html
<span [@fadeAnimTrigger]="wordIndex">{{words[wordIndex]}}</span>

// ts
animations: [
    trigger('fadeAnimTrigger', [
      transition(':decrement', [
        style({ opacity: 0 }), animate('500ms', style({ opacity: 1 }))
      ]),
      transition(':increment', [
        style({ opacity: 0 }), animate('500ms', style({ opacity: 1 }))
      ]),
    ])

I'm trying to replace style({ opacity: 0 }), animate('500ms', style({ opacity: 1 })) in the above code with your fadeIn

Multiple states for an element?

First of all, thanks so much for creating this module! Saves a lot of time and energy on some very common animations. The issue I'm running into that I'm not finding very clear on the docs is I'm trying to have different enter/leave animations based on the direction the user is navigating on what is essentially a custom slider widget.

The following markup works great if I exclude the *ngIf, but as soon as the animation completes, all blocks are shown. If I include the *ngIf, no animation happens at all and the blocks are simply hot swapped.

Everything works as expected if I consistently have the same enter/leave animation every time regardless of direction. Thanks again and please let me know if this simply isn't possible or if I'm just missing some concept from the docs.

stepDirectionNext: boolean;
currentStep: number;

[@zoomInRight]="stepDirectionNext && currentStep===0"
[@zoomOutLeft]="stepDirectionNext && currentStep!==0"
[@zoomInLeft]="stepDirectionPrev && currentStep===0"
[@zoomOutRight]="stepDirectionPrev && currentStep!==0"

How to continually repeat an animation?

Hi,

Just as the title states, how can I get an animation to continually repeat? For example getting an image to use that attention seeker flash.

Thanks!

OnLeave animation causes mat-tab to be broken

OnLeave animations are called when you switch tabs but OnEnter animations are not called back when you reenter the same tab.

This makes the elements go invisible for ever.

I manage to reproduce the bug via stackblitz.

Animation not take effect when Scrolling

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

Demo App: Bigger drop-down and search functionality

Currently, the screen size of the dropdown is small, and it's harder to find the right item.

I would like to suggest a bigger dropdown window perhaps with a search functionality on it to show the options based on keywords entered.

I could take up this issue if you find it worth implementing.

The provided animation trigger "enter" has not been registered!

Hi there.

I am trying to replicate example of how animate until a variable is false and I only make it works with bounce animation. When I try with fadein or another is says: The provided animation trigger "enter" has not been registered!

My code:

component.html
<div [@fadeInOnEnter]="animState" (@fadeInOnEnter.done)="onAnimationEvent($event)" class="app-logo"></div>

component.ts

import { fadeInOnEnterAnimation} from 'angular-animations';
animations: [
    fadeInOnEnterAnimation({ duration: 1000, delay: 2000 }),
  ]

Global animation options

Is it possible to add global options like duration for all the animations? In the classic animate.css package it is possible by setting CSS variables (like --animate duration) in :root

animation going left

Hello i have a doubt, the standard animation pulse/rubber going left is normal?

this is my stackblit test, can you tell if I'm forgetting something?

https://stackblitz.com/edit/taiyou-test-angular-animations

thanks for the help

Is it possible to wait for first animation to end before the second one starts?

I have two screens that i need to fade in and out one after the other but not both of them together. Is it possible to detect if the first fade out was completed to trigger the second fade in ?

I have three screens in total. First two are conditional, I want them to fade in and out one after the other (but not both at the same time). Is it possible ?

I apologize if i am not making any sense.

How to listen to animation end event

How to detect animation end event and enable another animation in sequence

Question about looping with animations that maintain state

Hey Filipows, great library! I just started learning Angular and I'm using it to do some simple animations on a playground website I'm creating.

My issue is that I'm trying to make an shape rotate 360 degrees clockwise, delay 100ms, then repeat (infinitely). However, I'm having trouble because the Rotate animation preserves state, so when implementing it similarly to your simple loop animation, it causes the shape to rotate 360 degrees clockwise, but then it rotates 360 degrees back counterclockwise (due to going back to its initial state from its final state).

Do you have any ideas how would I achieve the desired effect with your library?

Thank you very much!

Active development

Is there someone who is willing to maintain this project on a more frequent basis? Angular 18 is out, I started using this on 13.

There are some breaking changes that should be refactored.

Loop animations?

Hello,

I am trying to get one of your animations to continually loop. I.e. I want this icon button to continually pulse. But I can't get it to work - it doesnt pulse at all. Any ideas?

import { pulseAnimation } from 'angular-animations';

@Component({
  selector: 'app-credentials-dropdown',
  templateUrl: './credentials-dropdown.component.html',
  animations: [
    pulseAnimation()
  ]
})

and

    <button mat-icon-button [@pulse]="true">
        <mat-icon>add</mat-icon>
    </button>

How to use this with ngFor?

I have an ngFor displaying the items in my array. How can display animations onEnter and onLeave every time an element is added or removed from my array?

<mat-card [@bounceInOnEnter] [@bounceOutOnLeave] *ngFor="let file of audioFiles">

My component that contains the items is setup like so:

@Component({ selector: 'app-main-form', templateUrl: './main-form.component.html', styleUrls: ['./main-form.component.scss'], animations:[ bounceInOnEnterAnimation, bounceOutOnLeaveAnimation ] })

Currently I get the error:

Error: Uncaught (in promise): Error: Unable to resolve animation metadata node #undefined

Encourage the library authors to publish an Ivy distribution.

Like it is said, will you consider moving to Ivy?

Can we have easing options exposed by IAnimationOptions

Hi,
I really like this library. It allows us to focus on development and less on animations development. There is one thing I would like to have and this is an easing option that will allow the developers to decide the easing for the animations.
Thank you

usage in routing

Current implementation doesn't support animating leaving or entering children (with query(':leave')).
It seems it's necessary to have this feature in order to animate route views.

minor - typo

"bouncint" -> "bouncing"

https://github.com/filipows/angular-animations/tree/master/lib/bouncint-exits

by the way. Thank you for this utility lib.

also, how did you make your github profile image?

Usage with query, stagger and limit

Maybe I am stupid but is it possible to use the animations with query? Specifically I wanted to create a stagger animation and use the limit:

Code:

animations:      [
    trigger('fadeIn', [
      transition(':enter', [
        query(':enter', [
          style({opacity: 0}),
          stagger('80ms', [
            animate('500ms', style({opacity: 1})),
          ])
        ], {limit: 6})
      ])
    ])
  ]

Template:

<div class="items" @fadeIn>
    <div class="item" *ngFor="let item of items"></div>
</div>

Parametrize attention seekers state change expression

I noticed the attention seekers state change expression is bidirectional:

trigger((options && options.anchor) || 'pulseCustom', [
    transition(
      '0 <=> 1',
....

I was wondering if is it possible to parametrize this maybe with an enumerate like this:

interface IAttentionSeekerAnimationOptions {
    direction: '=>' | '<=' | '<=>';
}

Then on the functions, say pulseAnimation for example

trigger((options && options.anchor) || 'pulseCustom', [
    transition(
      `0 ${options.direction || "<=>} 1`
....

In my case I wanted to trigger the animation only when state changes from false to true. I can submit a PR in a couple of days if you find this feasible.

Thanks

How to animate something inside of an ngIf?

Hi there, I have a looping animation on an icon.

<button *ngIf="showSave"><icon="star" [@bounce]="animState" (@bounce.done)="animDone()"><icon> Save</button>

There is an icon is inside of a button to draw attention. But I want to hide that button until some event completes.

When the event is complete, I want to show the save button ie *ngIf="showSave" however the icon does not animate.

If I take the <icon> outside of the *ngIf, it works. How would one achieve this?

-

Animation callbacks get called even tho they didnt run

When having a leave animation the start and end animation

Template:
<div *ngIf="isVisible" [@fadeOutOnLeave] (@fadeOutOnLeave.done)="animDone($event)"></div>

Component:

//...

isVisible = false;

ngOnInit() {
  setTimeout(() => { this.isVisble = true; }, 5000);
  setTimeout(() => { this.isVisble = false; }, 10000);
}

animDone(event: AnimationEvent) {
  console.log('Animation Ended', event);
}

I would assume that animDone() does only gets called after the div has been faded-out. Instead animDone gets called on init already:

fromState: "void"
phaseName: "done"
toState: null
totalTime: 0

Feature Request: Provide more animation options

Really love this package but I encountered a few limitations when using it. Providing more options to some animations would be amazing:

• bounce should have a direction property to control in which direction it bounces, usecase: an arrow could bounce to the right or left but bounce can currently only bounce to the bottom
• bounce should have a distance property to control how much it bounces, usecase: something big will only bounce slightly with the current setting
• tada should have a scale property to control how much it scales, usecase: the current default might be to slightly to pop out of the other content (in contrast heartbeat has a scale property)

Looks like the latest version in not in npm - v0.0.11

npm i @angular/[email protected] --force
npm WARN using --force Recommended protections disabled.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @angular/[email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

iOS 15 - The provided animation property "backface-visibility" is not a supported CSS property for animations

Upgrading to iOS 15 causes this error and breaks my app. Works fine in iOS 14 and below.
Also seems to work ok in desktop safari for big Sur.

iOS 15 using an Ionic / Angular app.

⚡️ [error] - ERROR Error: Uncaught (in promise): Error: The animation trigger "flipOnEnter" has failed to build due to the following errors:

• The provided animation property "backface-visibility" is not a supported CSS property for animations

May be related to:
https://stackoverflow.com/questions/42744573/backface-visibility-not-working-in-safari

Why a double animation?

Animation

Error: NG05105: Unexpected synthetic listener @horizontalStepTransition.done found. Please make sure that:

• Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application.

• There is corresponding configuration for the animation named @horizontalStepTransition.done defined in the animations field of the @Component decorator (see https://angular.io/api/core/Component#animations).
  at checkNoSyntheticProp (platform-browser.mjs:760:11)
  at NoneEncapsulationDomRenderer.listen (platform-browser.mjs:724:86)
  at listenerInternal (core.mjs:25591:40)
  at ɵɵlistener (core.mjs:25472:5)
  at MatStepper_Case_1_For_6_Template (stepper.mjs:186:8)
  at executeTemplate (core.mjs:11268:9)
  at renderView (core.mjs:12470:13)
  at createAndRenderEmbeddedLView (core.mjs:12540:9)
  at LiveCollectionLContainerImpl.create (core.mjs:22877:31)
  at createOrAttach (core.mjs:22630:40)
  handleError @ core.mjs:6531
  Show 1 more frame
  Show less
  core.mjs:29861 Angular is running in development mode.
  core.mjs:6531 ERROR Error: NG05105: Unexpected synthetic listener @horizontalStepTransition.done found. Please make sure that:

• Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application.

• There is corresponding configuration for the animation named @horizontalStepTransition.done defined in the animations field of the @Component decorator (see https://angular.io/api/core/Component#animations).
  at checkNoSyntheticProp (platform-browser.mjs:760:11)
  at NoneEncapsulationDomRenderer.listen (platform-browser.mjs:724:86)
  at listenerInternal (core.mjs:25591:40)
  at ɵɵlistener (core.mjs:25472:5)
  at MatStepper_Case_1_For_6_Template (stepper.mjs:186:8)
  at executeTemplate (core.mjs:11268:9)
  at renderView (core.mjs:12470:13)
  at createAndRenderEmbeddedLView (core.mjs:12540:9)
  at LiveCollectionLContainerImpl.create (core.mjs:22877:31)
  at createOrAttach (core.mjs:22630:40)
  handleError @ core.mjs:6531
  Show 1 more frame
  Show less

  [NEW] Explain Console errors by using Copilot in Edge: click 
   to explain an error. 
  Learn more
  Don't show again
  

Can't build app

First great feature. Easy and fun to use :D

I have a problem when I try to build an app. I have this error:

ERROR in src/app/page-content/overview/overview.component.ts(16,5): Error during template compile of 'OverviewComponent'
Function calls are not supported in decorators but 'fadeInUpOnEnterAnimation' was called.

I'm using angular 8.2.0:
...
"@angular/forms": "^8.2.0",
"@angular/platform-browser": "^8.2.0",
"angular-animations": "^0.11.0",
...

In visual studio code, I have also error highlights. But when I again run: npm i angular-animations --save the error is gone. But when I change one parameter error is back again. Here are screenshots:

img1 - when I run the install

img2 - after I change one parameter

I saw in documentation that is working with AOT and JIT compilations.

Can you provide me suggestions to the problem?

Reload on button click

everytime i click a submit button it reloads the page.
The regular animation modules dont work with dom objects that are brought back in with ngif boolean changes

Can anyone send me in the right direction? first div-(slides out right)-> second div slides in left -(slides out right-> div one comes back. Thats what im trying to do and nothing is working ive tried.

Must say angular animations and styling is the biggest nightmare ever

How to do flip card using flip Y

I don't quite like the animation of flip and would like to have a simple card flip forward and backward.
I found flipInY and flipOutY does that but I'm not able to combine the two in nice seamless card flip.

I tried to use delay and chined but was not able to get a seamless result. I assume there is a way to do that?

Is the library still maintained?

Angular 10 - Function calls are not supported in decorators but '' was called

I have created an Ionic 5 Angular 10 project and I am importing some animations as I have done for previous projects.
However I am getting the error below. Any ideas what is causing this?
Similar code works fire with another Ionic 5 Angular 9 project I created.

Is this an Angular 10 issue or a typescript issue perhaps?

Error during template compile of 'AppComponent' Function calls are
not supported in decorators but 'slideInLeftOnEnterAnimation' was
called

If I remove the brackets I get the following error:

ERROR Error: Unable to resolve animation metadata node #undefined
at visitDslNode (browser.js:554)
at AnimationAstBuilderVisitor.build (browser.js:695)
at buildAnimationAst (browser.js:685)
at InjectableAnimationEngine.registerTrigger (browser.js:3856)
at registerTrigger (animations.js:166)
at Array.forEach ()
at AnimationRendererFactory.createRenderer (animations.js:170)
at createRootComponentView (core.js:18357)
at ComponentFactory$1.create (core.js:22157)
at ApplicationRef.bootstrap

    import { slideInLeftOnEnterAnimation } from 'angular-animations';

    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss'],
      animations: [
        slideInLeftOnEnterAnimation()
      ]
    })

  Ionic CLI                     : 6.11.11
   Ionic Framework               : @ionic/angular 5.3.5
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3
   angular-animations": "^0.11.0

Failed to execute 'animate' on 'Element': 'NaNms' is not a valid value for easing

I am unsuccessfully trying to make the staggering animations work per the documentation.

attempt: https://angular-animations-lib-demo-pws6ji.stackblitz.io/test

if I use a simple array of values, i.e. *ngFor="let i of [1,2,3]" then no problem, this works as expected.

If I use an array of objects, i.e. *ngFor="let i of my_array"

Where my array is
this.my_array = [ { foo: "value1", bar: "value", }, { foo: "value1", bar: "value", }, { foo: "value1", bar: "value", } ];

Then I get the error :

Failed to execute 'animate' on 'Element': 'NaNms' is not a valid value for easing

-

Performance issues with collapse

Collapse/Expand have performance issues on mobile devices. This is due to height recalculation on the DOM, there is a good article talking about this.

Angular 8 peer dependency upgrade

Angular 8 was released on May 28th. Animations seem to be working fine on my side but I am getting an outdated dependency warning when installing via npm.

npm WARN [email protected] requires a peer of @angular/animations@^6.0.0 but none is installed. You must install peer dependencies yourself.

ETA on official Angular 8 support?

Horizontal collapse

Is possible to set the "expand" and "collapse" animations in horizontal direction?

Add scale parameter to zoom animations

Currently the zoom animation fades from 0 to 100% and scales from 0 to 100%. The scale from 0% creates a very mighty effect which I would like to settle down. I would like to define the start-scale for zoomIn and the final-scale for zoomOut to make the effect more gently. E.g. from 0.8% to 1%.

For comparison: Netflix zooms in the full page gently when starting a video. This is currently not possbile.

Please update to last angular version to avoid old compilation es2015/esm2015

Please update to last angular version to avoid old compilation es2015/esm2015

Hide component before delay ends

Hi,

is there a way that a component can be hidden before the delay ends. For example when using fadeIn with delay 3 sec?

I tried adding opacity: 0; animation-fill-mode: forwards; css properties to the component where animation is attached. Didn't work though ...

Thanks

Example to use this within router-outlet ?

Everything in the title, is this possible to use these animations for page transitions?
I tried it following the tutorial https://angular.io/guide/route-animations
It doesn't work