Web Animations are still experimental but it’s a beautiful straightforward API and as for the moment it’s one of the most performant ways of making animations for the web.

According to mdn: letting browsers make their own internal optimizations without hacks, coercion, or Window.requestAnimationFrame() .

So I thought it will be really cool to create a tiny interactions lib for Angular based on the Web Animations API.

If you’re familiar with micronjs you’ll recognised the “vibe” of use, I actually kind of “converted” the micro-interactions that micronjs gives by adding css classes in runtime based on its data attributes… instead of css and datasets I used → Web Animations API and an Angular directive :)

Here’s the Demo app.

To start using ng-micro-interact follow these 3 steps:

1. Install the package npm i ng-micro-interact

2. Import the NgMicroInteractModule

import { NgMicroInteractModule } from 'ng-micro-interact'

import { AppComponent } from './app.component'; @NgModule({

imports: [ BrowserModule, FormsModule, NgMicroInteractModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

3. use the directive on any Element that you think is a good candidate for interaction:

<div ngMicroInteract

[type]="'blink'"

[options]="{ duration: 2000}"

[trigger]="'mouseover'"> Blink! </div>

The implementation is really simple, dig into the code and star the repo if you like :)

Cheers,

Liron.