ng-micro-interact
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    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 }

    Install

    npm i ng-micro-interact

    DownloadsWeekly Downloads

    2

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    228 kB

    Total Files

    72

    Last publish

    Collaborators

    • lironhazan