Basic Animation Directives

Fade In

Fade Animation
<div ngxFadeIn>

Slide In

Slide from Left
<div ngxSlideIn direction="left">

Scale In

Scale Animation
<div ngxScaleIn>

Rotate In

Rotate on Y-axis
<div ngxRotateIn axis="y">

Scroll-Based Animations

Scroll Reveal

Reveals on Scroll
<ngx-scroll-reveal animation="slide-up">

Parallax Scroll

Parallax Effect
<div ngxParallaxScroll [speed]="0.5">

Stagger List Animation

Staggered List

Item 1
Item 2
Item 3
Item 4
Item 5
<ngx-stagger-list animation="slide-up">

Typewriter Effect

English Typewriter

Welcome to @elm/ngx-animations - Next-level animation library!|
<ngx-typewriter [text]="text">

Arabic Typewriter (RTL)

مرحبا بكم في مكتبة الرسوم المتحركة|
<ngx-typewriter [rtl]="true">

Ripple Click Effect

Primary Button

<button ngxRippleClick>

Secondary Button

<button ngxRippleClick>

Scrollable Stacked Cards

Layered, scrollable cards using ngxParallaxScroll + ngxFadeIn.

Smooth Parallax Cards

Cards that gently float at different speeds as you scroll.

Tap card to expand

Layered Storytelling

Use stacking to tell a progressive story as the user scrolls.

Tap card to expand

Interactive Details

Tap a card to expand, reveal extra content, or actions.

Tap card to expand

Mobile Friendly

Fully responsive and tuned for smooth 60fps scrolling.

Tap card to expand

Timeline Service

Chained Animations (GSAP-like)

Box 1
Box 2
Box 3

Watch the boxes animate in sequence!

timeline.to(el1, props, 500).to(el2, props, 500).play()

Glass Effect Cards

Glass Motion

Soft blur, subtle depth, and hover motion.

UI Blocks

Perfect for stats, feature cards, and hero sections.

Dark Mode Ready

Designed for your #051D49 background.

Glass Text Animations

Next-Level Glass UI

Animated gradient text inside a frosted glass block.

نص عربي متوهج

نص عربي متحرك داخل بطاقة زجاجية أنيقة.

🎪 Bounce & Flip Animations

Bounce In

Bouncy Entrance! 🎈
<div ngxBounceIn direction="up">

3D Flip

Flip Card! 🃏
<div ngxFlipIn axis="horizontal">

Zoom Bounce

Zoom with Bounce! 💥
<div ngxZoomIn style="bounce">

Zoom Elastic

Elastic Zoom! ⚡
<div ngxZoomIn style="elastic">

✨ Interactive Effects

Shake on Hover

Hover Me! 🌊
<div ngxShake [shakeOnHover]="true">

Pulse Effect

Pulsing! 💓
<div ngxPulse [continuous]="true">

Glitch Effect

GLITCH 🔥
<div ngxGlitch [intensity]="4">

Shake on Click

Click Me! 👆
<div ngxShake [shakeOnClick]="true">

🎊 Confetti Effect

Celebrate with Confetti!

<ngx-confetti [particleCount]="150">

🎯 GSAP-Inspired Premium Effects (FREE!)

Professional animations inspired by GSAP - No library required!

Magnetic Button

Follows your mouse like a magnet!

<button ngxMagnetic [strength]="0.5">

3D Tilt Card

3D Effect

Move mouse over me!

<div ngxTilt3d [glare]="true">

Text Scramble

GSAP-INSPIRED

Matrix-style text decoding!

<ngx-text-scramble [text]="text">

RTL Support

LTR Animation

Slides from Left →

RTL Animation

يتحرك من اليمين ←