Introducing ng-anim8: My Angular Animation Utility Library

Modern Angular applications often need small, polished transitions: a panel should collapse smoothly, a modal should fade in, an error badge should shake once, or a sidebar should slide into view. These are not complex animation systems. They are everyday UI details that make an interface feel more responsive and easier to understand. That is the reason I built ng-anim8: a small Angular animation utility library that provides declarative animation components and an attention directive for common UI motion patterns.

ng-anim8 is designed for Angular 20+, works without @angular/animations, is SSR-safe, zoneless-compatible, and can be imported as individual standalone components or through one Angular module.

Why I built ng-anim8

Angular already has powerful animation capabilities. The official Angular documentation describes animations as a way to improve user experience by making transitions less abrupt and by helping guide user attention through a workflow. Angular also provides modern animate.enter and animate.leave primitives for elements entering and leaving the DOM.

But in day-to-day application development, I often do not need a fully custom animation setup. I usually need a small set of reusable transitions that are easy to read directly in a template.

For example:

That is the core idea behind ng-anim8: wrap content in a semantic animation component, control rendering with Angular’s template syntax, and keep the animation logic simple.

What is ng-anim8?

ng-anim8 is an easy-to-use Angular animation library for common UI transitions. It provides standalone Angular components such as FadeComponent, SlideComponent, CollapseComponent, GrowComponent, ZoomComponent, and BlurComponent, plus an Anim8AttentionDirective for one-shot attention animations such as shake, pulse, bounce, and wiggle.

The library is available on GitHub, published as an npm package, and has a live demo hosted with GitHub Pages. The GitHub repository describes it as a declarative animation library for Angular 20+ with no dependency on @angular/animations.

Installation

Install ng-anim8 from npm:

The package expects Angular peer dependencies @angular/core ^20.3.0 and @angular/common ^20.3.0.

Quick start with standalone Angular components

ng-anim8 works well with standalone Angular components. Import the animation component you need, then use it in the template:

This keeps the animation close to the UI structure. There is no separate animation trigger definition and no additional animation module setup required.

Using ng-anim8 with NgModules

If your application still uses NgModules, you can import NgAnim8Module once and use all components and directives from the library:

This makes ng-anim8 usable in both modern standalone Angular applications and more traditional Angular module-based codebases.

Available animation components

ng-anim8 currently includes a focused set of animation primitives for common interface patterns:

These components cover many UI situations: modals, dropdowns, drawers, expandable panels, validation messages, notification badges, and small interactive feedback moments.

Why no dependency on @angular/animations?

One intentional design decision in ng-anim8 is that it does not depend on @angular/animations. The GitHub README highlights this as one of the core features of the library.

This matters because modern Angular is moving toward lighter, CSS-oriented enter and leave animations. Angular’s current documentation describes animate.enter and animate.leave as the way to animate elements entering and leaving the DOM.

ng-anim8 follows a similar practical direction: keep UI motion close to the DOM, avoid unnecessary runtime dependencies, and make the common cases easy.

SSR-safe and zoneless-compatible

ng-anim8 is also designed to be SSR-safe and zoneless-compatible. That is important for modern Angular applications, where server-side rendering, hydration, and zoneless change detection are increasingly relevant.

Angular’s hydration documentation explains that hydration allows an SSR application to reuse existing DOM and avoid flicker or layout shift during client startup. Angular’s zoneless documentation also notes that zoneless applications should remove ZoneJS from the build to reduce bundle size.

Because ng-anim8 avoids a dependency on @angular/animations and is designed with SSR and zoneless usage in mind, it fits well into modern Angular application architecture.

When should you use ng-anim8?

ng-anim8 is a good fit when you want:

• simple Angular fade, slide, collapse, grow, zoom, or blur animations;
• reusable animation primitives instead of repeating CSS classes everywhere;
• declarative template usage;
• standalone Angular component imports;
• SSR-safe UI motion;
• zoneless-compatible animation helpers;
• attention animations for validation, badges, buttons, and user feedback;
• a lightweight alternative for common animation patterns without adding @angular/animations.

It is not meant to replace every possible animation system. If you need complex timeline orchestration, canvas animation, advanced physics, or highly custom motion design, you may still want a specialized animation library or custom CSS. ng-anim8 focuses on the common UI cases that appear again and again in Angular projects.

Live demo and source code

You can try the library in the live demo, inspect the source code on GitHub, and install it from npm.

The repository is MIT licensed and currently published as an Angular 20+ utility library.

Final thoughts

ng-anim8 started as a small utility library for a recurring problem: adding clean, reusable, declarative animations to Angular applications without introducing unnecessary complexity.

The goal is simple: make everyday Angular UI motion easier to implement, easier to read, and easier to reuse.

If you are building an Angular 20+ application and need a small set of practical animation components, ng-anim8 may be a useful addition to your toolbox.