ngx-flip-card v1.0.0

Ngx Flip Card

Angular component to animate a double-sided card.

Allows control over direction of rotation, speed of animation and easing function. Can be performed on click or by external event.

Easily stylable.

Also contains a component to animate a tilt effect on the card.

This library was generated with Angular CLI version 13.3.0.

Examples

Flip card on click

Tilt card and flip

Usage

Import the NgxFlipCardModule and add the ngx-flip-card to the html of your components. ngx-flip-card should have two children, one for the front side and another for the back side with specific directives.

<ngx-flip-card [easing]="'easeOut'" [animationDuration]="2000">
    <div card-front>
        <img src="assets/cc_front.png" alt="card front">
    </div>
    <div card-back>
        <img src="assets/cc_back.png" alt="card back">
    </div>
</ngx-flip-card>

To add the tilt, add the component ngx-tilt-card

<ngx-tilt-card>
    <ngx-flip-card [easing]="'easeOut'" [animationDuration]="2000">
        <div card-front>
            <img src="assets/cc_front.png" alt="card front">
        </div>
        <div card-back>
            <img src="assets/cc_back.png" alt="card back">
        </div>
    </ngx-flip-card>
</ngx-tilt-card>

API

Flip card

Tilt card