| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Spring-physics based animations for Angular, inspired by react-spring.
Create fluid, natural-feeling animations using spring physics instead of durations and easing curves. Integrates seamlessly with Angular's signal-based reactivity.
npm install ngx-springimport { Component, signal } from '@angular/core';
import { spring, Spring } from 'ngx-spring/dom';
@Component({
selector: 'app-animated-box',
standalone: true,
imports: [Spring],
template: `
<div [spring]="springValues" class="box">
Hover me!
</div>
`,
host: {
'(mouseenter)': 'isHovered.set(true)',
'(mouseleave)': 'isHovered.set(false)',
},
})
export class AnimatedBoxComponent {
isHovered = signal(false);
// Spring automatically animates when isHovered changes
springValues = spring({
scale: () => this.isHovered() ? 1.1 : 1,
rotate: () => this.isHovered() ? 5 : 0,
});
}Creates reactive spring animations. Accepts getter functions that are tracked for signal changes.
import { spring, config } from 'ngx-spring/dom';
// Basic usage
springValues = spring({
opacity: () => this.isVisible() ? 1 : 0,
x: () => this.position().x,
});
// With custom spring physics
springValues = spring({
y: () => this.isOpen() ? 0 : -100,
}, {
config: config.wobbly, // Bouncy animation
});
// From/to style
springValues = spring({
from: { opacity: () => 0 },
to: { opacity: () => this.isVisible() ? 1 : 0 },
});Applies spring animations to DOM elements.
<!-- Basic usage -->
<div [spring]="springValues">Animated content</div>
<!-- Custom target element -->
<div [spring]="springValues" [springHost]="targetRef">
<div #targetRef>This element gets animated</div>
</div>Use convenient shortcuts instead of writing CSS transforms:
| Shortcut | CSS Transform |
|---|---|
| x, y, z | translate() / translate3d() |
| scale, scaleX, scaleY | scale() / scaleX() / scaleY() |
| rotate, rotateX, rotateY, rotateZ | rotate() / rotateX() / etc. |
| skew, skewX, skewY | skew() / skewX() / skewY() |
Built-in spring configurations:
import { config } from 'ngx-spring';
config.default // tension: 170, friction: 26
config.gentle // tension: 120, friction: 14
config.wobbly // tension: 180, friction: 12
config.stiff // tension: 210, friction: 20
config.slow // tension: 280, friction: 60
config.molasses // tension: 280, friction: 120Inspired by react-spring - A spring-physics first animation library.
MIT - Chau Tran
| Back | FazBrowse Home | New Git URL |