ngx-animations

ngx-animations is the quickest way to get started with Angular animations - without writing your own animations!

Specifically, this package specializes in animations that can be used when adding or removing items from a list.

You can view a demo of the site here.

Using ngx-animations

Just give me animations!

First, import the animations into the appropriate module.

import { NgxAnimationsModule } from 'ngx-animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  @NgModule({   ...   imports: [      BrowserAnimationsModule, // This module is required for all Angular animations.     NgxAnimationsModule, // This module is only needed when using the animation directives.   ], }) export class AppModule { }

Then just add the appropriate animation directive to the element you wish to animate.

<a animateFadeInAndOut>Something I want to animate</a>

The element will now animate when it is added or removed from the DOM.

You can also change some of the animation's options

<a animateFadeInAndOut [animationEnterPosition]="-50px" [animationLeavePosition]="100%" [animationDuration]="500ms">   Something I want to animate </a>

The fadeInAndOut animation has the options shown above. All other animations only include the animationDuration option.

Give me more control!

For more granular customizability, import useSlideFadeIn and useSlideFadeOut animations. These animations can then be added to whatever trigger you choose:

import { useSlideFadeInAnimation, useSlideFadeOutAnimation } from 'ngx-animations'; @Component({   selector: 'my-component',   animations: [        trigger('myTriggerName', [     transition(':enter', useSlideFadeInAnimation()),     transition(':leave', useSlideFadeOutAnimation())   ]) })

and in the template:

<a [@myTriggerName]></a>

When importing the animations, you can add parameters to adjust the duration and other properties of the animation:

import { useSlideFadeInAnimation, useSlideFadeOutAnimation } from 'ngx-animations';  @Component({   selector: 'my-component',   animations: [     trigger('myTriggerName', [       transition(':enter', useSlideFadeInAnimation('500ms', '300px') ),       transition(':leave', useSlideFadeOutAnimation('1000ms', '-100px')),     ])   ] })

rather than using the useAnimationNameAnimation functions included in this package, you could instead use Angular's useAnimation function, passing the appropriate parameters like so:

import { slideFadeIn, slideFadeOut } from 'ngx-animations';  @Component({   selector: 'my-component',   animations: [     trigger('myTriggerName', [       transition(':enter', useAnimation(slideFadeIn, { params: { time: '500ms', startPos: '300px' }})),       transition(':leave', useAnimation(slideFadeOut)),     ])   ] })

The result will be the same whether you use useAnimation or useAnimationNameAnimation.

Included Animations

(default parameters shown in examples)

Animations with special parameters

Animations with no extra parameters

The following animations only have a time parameter

Example

useGrowInAnimation('200ms')

or

useAnimation(growIn, {params:{time: '200ms'}})

Demo App

Follow these instructions to run the demo app.

1. Clone the repository to your local machine
2. From the project folder, run npm install to install all required dependencies
3. Run ng serve to serve the project from a live-updating server.
4. Go to localhost:4200 to see the demo site

Tips

• If you want to fade between two elements without shrinking and growing, add position:absolute and max-height: [some-height]px to the proper elements. See the cat picture in the demo site for an example.

Contributing

Contributions are welcome! Continue reading for instructions on how to contribute.

Commit Message

When you are happy with the changes you have made, commit the updated code to the repository. Commit messages should follow the material commit message guidelines. It is recommended that you install the commitizen VS Code extension to help. Alternatively, run npm run commit to commit from the command line.

Contribution Ideas

Want to contribute, but not sure where to start? Here are some suggestions

• Take a look at animate.css for inspiration. You can also use the transitions on that site as a starting point for your animations
• Make some emphasis transitions. Currently all animations run when the element is added to a view. There could be plenty of uses for animations that transition from an active to inactive state, or for emphasizing elements.
• Currently, all animations grow and shrink in height, but not in width. See if shrinking width in the current animations works well, or add separate animations that shrink on the X axis.