https://github.com/aaron-sterling/angular-animation-looper

Dynamic looping of Angular animation. Specify an animation and a number of iterations, and the animation will repeat for that many iterations. You can change the number of iterations programmatically.
https://github.com/aaron-sterling/angular-animation-looper

angular angular-animation angular-animations animation animations ionic loop looper looping

Last synced: 1 day ago
JSON representation

Dynamic looping of Angular animation. Specify an animation and a number of iterations, and the animation will repeat for that many iterations. You can change the number of iterations programmatically.

• Host: GitHub
• URL: https://github.com/aaron-sterling/angular-animation-looper
• Owner: Aaron-Sterling
• Created: 2018-01-27T20:25:39.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-30T22:19:45.000Z (almost 7 years ago)
• Last Synced: 2025-01-13T14:46:15.298Z (8 days ago)
• Topics: angular, angular-animation, angular-animations, animation, animations, ionic, loop, looper, looping
• Language: TypeScript
• Size: 67.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# angular-animation-looper

Dynamic looping of Angular animations. Define an animaton with keyframes, specify a number of iterations, and the animation will repeat for that many iterations. You can change the number of iterations programmatically.

* Next page: [Setup](https://github.com/Aaron-Sterling/angular-animation-looper/blob/master/docs/setup.md)

* Complete example: [Ionic demo](https://github.com/Aaron-Sterling/angular-animation-looper/tree/master/ionic%20demo)

## Installation

```

npm install angular-animation-looper --save

```

## Sample usage

In your template:

```





```


In ```app.module.ts```:

```

import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { LoopAnimationModule } from 'angular-animations-looper';

@NgModule({

  declarations: [],

  imports: [

    BrowserModule,

    BrowserAnimationsModule, // IMPORTANT: You must import these modules in this order

    LoopAnimationModule

  ],

  bootstrap: [],

  entryComponents: [],

  providers: []

})

export class AppModule {}

```

In the ts file for your template:

```

import { LoopAnimationService, loopableAnimation } from 'angular-animations-looper';

import ANIMATION_TO_LOOP from './animation-definition';  // this looks like : animate(starting state, keyframes)

const LOOPABLE_ANIMATION = loopableAnimaton(ANIMATION_TO_LOOP);

@Component({

  animations: [ LOOPABLE_ANIMATION ]; // declare the loopable animation in the component

})

export class SampleClass {

    constructor(public loop: LoopAnimationService) {  // <-- inject this service

    this.loop.registerAnimation('sampleTrigger', LOOPABLE_ANIMATION, 7);  // this animation will loop 7 times once it is started

    this.loop.currentState('sampleTrigger').subscribe(state => this.animationState = state); // required so the service can talk to the trigger in the template

    this.loop.startAnimation('sampleTrigger');  // starts the looping animation

    }

}

```

* Next page: [Setup](https://github.com/Aaron-Sterling/angular-animation-looper/blob/master/docs/setup.md)

* Complete example: [Ionic demo](https://github.com/Aaron-Sterling/angular-animation-looper/tree/master/ionic%20demo)