Skip to content
This repository has been archived by the owner on Mar 3, 2022. It is now read-only.

Micro Interaction Directive for Angular apps - based on native web animations and nothing more..

License

Notifications You must be signed in to change notification settings

LironHazan/ng-micro-interact

Repository files navigation

npm version License

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 }

About

Micro Interaction Directive for Angular apps - based on native web animations and nothing more..

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published