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

| Property | Type | Default | Description | |-------------------|--------------------------------------------------|--------------|-----------------------------------------------| | isBackSide | boolean | false | Sets the back side as the current position | | isBackSideChange | EventEmitter boolean | N/A | Event for when isBackSide changes | | animate | boolean | true | Play animation when turning | | animationDuration | number | 2500 | Animation duration in milliseconds | | animationEnd | EventEmitter | N/A | Fires when animation ends | | TranslationZ | number | 2 | Depth of the card (during rotation) in pixels | | easing | 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'linear' | Easing function | | direction | 'horizontal' | 'vertical' | 'horizontal' | Direction of the rotation | | flipOnClick | boolean | true | Should the card rotate when clicked | | flipCard() | function | N/A | Call this function to flip the card |

Tilt card

| Property | Type | Default | Description | |------------------|--------|---------|-------------------------------------------| | rotationDegreesX | number | 5 | Maximum degrees of rotation in the X axis | | rotationDegreesY | number | 5 | Maximum degrees of rotation in the Y axis |