https://github.com/nickgraffis/ng-spring

1.8kb function that replaces Angular animation's keyframes with springKeyframes, for physics based animations.
https://github.com/nickgraffis/ng-spring

angular angular-animations animations keyframes physics spring spring-keyframes spring-physics

Last synced: 8 days ago
JSON representation

1.8kb function that replaces Angular animation's keyframes with springKeyframes, for physics based animations.

• Host: GitHub
• URL: https://github.com/nickgraffis/ng-spring
• Owner: nickgraffis
• License: mit
• Created: 2022-08-13T17:36:56.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-13T19:42:45.000Z (over 2 years ago)
• Last Synced: 2024-10-31T18:17:19.912Z (16 days ago)
• Topics: angular, angular-animations, animations, keyframes, physics, spring, spring-keyframes, spring-physics
• Language: TypeScript
• Homepage: https://nickgraffis.github.io/ng-spring
• Size: 859 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Documentation

Full docs can be found at [nickgraffis.github.io/ng-spring](https://nickgraffis.github.io/ng-spring/)

# Installation

```bash

yarn add ng-spring

```

Or use `npm` or `pnpm`.

# Usage

Useage is extreamly simple, just replace `keyframes` from `@angular/animations` with the default export from `ng-spring`. 

## Basic 

```ts{8-11}

import springKeyframes from 'ng-spring'

@Component({

  selector: 'app-hello',

  animations: [

    trigger('openClose', [ 

      transition('open => closed', [

        animate('500ms', springKeyframes({

          from: {opacity: 0, transform: 'translateY(-100px)'},

          to: {opacity: 1, transform: 'translateY(0)'}

        }))

      ]),

    ])

  ]

})

export class HelloComponent {

  @HostBinding('@openClose')

  public animate = true

}

```

It works the same in more advanced use cases:

```ts{10-13}

import springKeyframes from 'ng-spring'

@Component({

  selector: 'app-hello',

  animations: [

    trigger('helloAnimation', [

      transition(':enter', [

        query('.hero', [

          stagger(30, [

            animate('500ms', springKeyframes({

              from: {opacity: 0, transform: 'translateY(-100px)'},

              to: {opacity: 1, transform: 'translateY(0)'}

            }))

          ])

        ])

      ])

    ])

  ]

})

export class HelloComponent {

  @HostBinding('@helloAnimation')

  public animate = true

}

```

## Options

The first option of `springKeyframes` is an object with two properties, `from` and `to`. The `from` property is an object with the properties that you want to animate from, and the `to` property is an object with the properties that you want to animate to.

The second option of `springKeyframes` is the options object.

```ts

interface Options {

  stiffness: number

  damping: number

  precision: number

  unit: string

}

```

### Stiffness

**Default: 100**

The attraction force of a spring. Higher values create faster, sharper movement.

### Damping

**Default: 10**

The opposing force of a spring. Higher values reduce the bounciness of the spring.

### Precision

**Default: 0.001**

The precision of values that are being animated.

### Unit

**Default: 'px'**

The unit of measurement for the css properties.