@elm/ngx-animations – Documentation

Install the library in your Angular project:

npm install elm-ngx-animations

Standalone Component Example

Minimal setup using standalone components (Angular 16+):

import { Component } from '@angular/core';
import {
  FadeInDirective,
  SlideInDirective,
  ScaleInDirective,
  RotateInDirective
} from 'elm-ngx-animations';

@Component({
  selector: 'app-animations-demo',
  standalone: true,
  templateUrl: './animations-demo.component.html',
  imports: [
    FadeInDirective,
    SlideInDirective,
    ScaleInDirective,
    RotateInDirective
  ]
})
export class AnimationsDemoComponent {}

Template Example

Use the directives directly in your HTML:

<div ngxFadeIn [duration]="600" [triggerOnScroll]="true">
  Fade Animation
</div>

<div ngxSlideIn [direction]="'left'" [duration]="600" [triggerOnScroll]="true">
  Slide from Left
</div>

ngxFadeIn

Selector:[ngxFadeIn]

Smooth fade in/out animation. Supports scroll‑triggered entrance.

• duration (ms, default 600)
• delay (ms)
• direction: 'in' | 'out' | 'in-out'
• triggerOnScroll, threshold

<div ngxFadeIn [duration]="500">Content</div>

ngxSlideIn

Selector:[ngxSlideIn]

Slides elements from any side with RTL awareness.

• direction: 'left' | 'right' | 'top' | 'bottom'
• distance (px)
• rtl (force RTL if needed)

<div ngxSlideIn direction="left">Slides in</div>

ngxScaleIn

Selector:[ngxScaleIn]

Scales elements from a chosen transform origin.

• startScale, endScale
• origin: 'center' | 'top-left' | ...

<div ngxScaleIn [startScale]="0.5">Scale in</div>

ngxRotateIn

Selector:[ngxRotateIn]

3D rotation on X/Y/Z axis.

• axis: 'x' | 'y' | 'z'
• degrees (default 180)

<div ngxRotateIn axis="y" [degrees]="90"></div>

ngxBounceIn

Bouncy entrance animation for cards.

<div ngxBounceIn direction="up">Bouncy card</div>

ngxFlipIn

3D flip card effect (horizontal/vertical/diagonal).

<div ngxFlipIn axis="horizontal">Flip me</div>

ngxHoverLift

Utility hover effect (scale + shadow) for cards & buttons.

<div class="card" ngxHoverLift>Hover card</div>

ngxCountUp

Animated number counter for stats and KPIs.

<span ngxCountUp [end]="2500" [duration]="1200"></span>

ngxMagnetic

Magnetic hover that pulls toward the cursor.

<button ngxMagnetic [strength]="0.5">Hover me</button>

ngxTilt3d

3D tilt card with optional glare overlay.

<div ngxTilt3d [maxTilt]="15" [glare]="true">3D Card</div>

<ngx-scroll-reveal>

Reveal content on scroll with multiple animation presets.

<ngx-scroll-reveal animation="slide-up">...</ngx-scroll-reveal>

<ngx-stagger-list>

Stagger animations for lists of items.

<ngx-stagger-list [staggerDelay]="120">...</ngx-stagger-list>

<ngx-typewriter>

Typewriter text, supports Arabic with [rtl].

<ngx-typewriter [text]="'مرحبا بكم'" [rtl]="true"></ngx-typewriter>

<ngx-marquee>

Continuous scrolling text/content with LTR & RTL modes.

<ngx-confetti>

Full‑screen confetti explosion triggered from any action.

<ngx-profile-card>

Glass profile cards with gradients, stats and Arabic/RTL support.

Scrollable Stacked Cards

Layered, scrollable cards that stack on top of each other using ngxParallaxScroll and ngxFadeIn.

Ideal for storytelling, onboarding flows, feature walkthroughs, or case studies where each scroll step reveals the next “chapter” of the story.

Key ideas:

• Use a position: sticky card inside a tall container to create stacking.
• Apply ngxParallaxScroll on a wrapper element for subtle depth and different speeds per card.
• Add ngxFadeIn on the content area so cards fade in as they enter the viewport.
• Toggle an expanded class on click to reveal more details.

<div class="stacked-cards-container">
  @for (card of stackedCards; track card.id; let i = $index) {
    <div class="stacked-card-wrapper"
         ngxParallaxScroll
         [speed]="0.15 + i * 0.08">
      <article class="stacked-card"
               [class.expanded]="expandedId === card.id"
               (click)="toggle(card.id)">
        <div class="stacked-card-body"
             ngxFadeIn
             [triggerOnScroll]="true">
          <h3>{{ card.title }}</h3>
          <p>{{ card.description }}</p>
        </div>
      </article>
    }
  }
</div>

See the Demo → Scrollable Stacked Cards section for a fully wired example with CTA buttons and expanded detail state.

TimelineService

GSAP‑like API for chaining animations.

const tl = timeline.create().to(el, { opacity: '1' }, 500);

RtlLanguageService

Toggle between English/Arabic and LTR/RTL at runtime.

rtl.setLocale('ar'); // RTL + Arabic