ng-motion

ng-motion is an Angular animation library built on motion-dom that brings Framer Motion's declarative animation patterns to Angular developers. It provides familiar concepts like variants, gestures, exit animations, and motion values through Angular-native APIs like directives, providers, and injection-context hooks.

Key Features

• Declarative Motion — Animate elements via the ngmMotion directive with initial, animate, and exit properties
• Motion Values & Hooks — Use useMotionValue(), useSpring(), and useTransform() for reactive animation state
• Gestures — Add hover, tap, and other interactive animations with whileHover and whileTap bindings
• Layout Animations — Automatic layout animations with layout and shared element transitions via layoutId
• Scroll & Viewport — Scroll-linked motion values and in-view animation triggers
• Presence & Exit — Handle component mounting/unmounting with *ngmPresence and exit animations
• Imperative Control — Use the imperative animate() function and scoped useAnimate() for programmatic animation

Philosophy

ng-motion adapts Framer Motion's intuitive animation mental model to Angular's ecosystem, using directive inputs, Angular outputs, dependency injection, and injection contexts rather than attempting a direct React port.