A lightweight and modular Angular directives library that provides ready-to-use animations (fade, scale, rotate, translate, skew, color, bounce) and gesture directives (tap, double-tap, press, swipe, pan, pinch, rotate, etc.).

Includes services and base directives for building gesture-driven animations.

Also support Angular 8 ✅ For Angular 8 projects simply import 'hammerjs' in polyfills.ts or main.ts.

Angular 20+ ✅ fully supported, Vite SSR safe

• 🚀 Built with Angular 16 directives

• 👆 Gesture directives included:

  • ngxsture-tap
  • ngxsture-doubletap
  • ngxsture-tripletap
  • ngxsture-press
  • ngxsture-pressup
  • ngxsture-swipe
  • ngxsture-pan
  • ngxsture-pinch
  • ngxsture-rotate

• 🎭 Animations included:

  • ngxFade
  • ngxScale
  • ngxRotation
  • ngxTranslate
  • ngxSkew
  • ngxColor
  • ngxBounce

• ⚡ Optimized build with ESM output and tree-shaking support

npm install ngxture

<!-- Fade --><divngxFade[config]="{duration: 500, easing: 'ease-in' }"> I will fade in! </div><!-- Rotate --><divngxRotate[config]="{degrees: 90, duration: 400 }"> I will rotate! </div><!-- Bounce --><buttonngxBounce> Bouncy Button </button>

<!-- Tap --><divngxsture-pan(panStart)="onStart($event)"> Tap me </div><!-- Swipe --><divngxsture-swipe(swipeLeft)="onSwipeLeft($event)"> Swipe me </div>

🤝 Contributing

Contributions are welcome! Please open an issue GitHub Issue or PR on GitHub PR