ng-micro-interact v0.0.5

ng-micro-interact

Tiny Angular lib for micro interactions using the modern web animations API. Inspired by micronjs.

Hit The Demo

Using ng-micro-interact will give you:

• Types.
• Excellent/Best performance

Web Animation API It is one of the most performant ways to animate on the Web where supported, letting the browser make its own internal optimizations without hacks, coercion, or Window.requestAnimationFrame().

Easily add micro interactions as follows:

np i ng-micro-interact

import { NgMicroInteractModule } from 'ng-micro-interact'
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgMicroInteractModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

    <div class="sq" ngMicroInteract 
                 [type]="'blink'" 
                 [options]="{ duration: 2000}" 
                 [trigger]="'mouseover'">  Blink! </div>

API:

Inputs:

type

Optional, string - if won't be specified the default be 'fade' Could be one of the following: blink, bounce, fade, flicker, groove, jelly, jerk, pop, shake, squeeze, swing, tada

trigger

Optional, string, Event name, if won't be specified the default be 'mouseover'

options

Optional, KeyframeAnimationOptions, if won't be specified the default be: { duration: 2000 }