Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
.editorconfig
.npmignore
README.md
angular.json
package-lock.json
package.json
tsconfig.build.json
tsconfig.json
tslint.json

README.md

ng-scene npm version

It is an angular component of scenejs animation library.

This supports @angular 5.x, 6.x.

Install

$ npm install ng-scene  --save

How to use

  • Module
import { NgSceneModule } from 'ng-scene';

@NgModule({
  imports: [
    ...
    NgSceneModule,
    ...
  ],
})
export class AppModule {}
  • Component
import { Component } from '@angular/core';
import { EASE, EASE_IN, EASE_IN_OUT, bezier, steps, STEP_START, STEP_END } from 'ng-scene';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  easing = EASE_IN_OUT;
  keyframes = {
    '0': {'border-width': '150px', opacity: 1, transform: 'scale(0)'},
    '1': {'border-width': '0px', opacity: '0.3', transform: 'scale(0.7)'},
  };
}
  • Template
<ng-scene iterationCount="infinite" [easing]="easing" css autoplay>
    <ng-scene-item
      [duration]=1
      [from]="{'border-width': '150px', opacity: 1, transform: 'scale(0)'}"
      [to]="{'border-width': '0px', opacity: 0, transform: 'scale(1)'}">
      <div class="raindrop"></div>
    </ng-scene-item>
    <div class="raindrop" [keyframes]="keyframes" [delay]=0.4 ng-scene-item>
    </div>
    <div class="raindrop" [keyframes]="keyframes" [delay]=0.8 ng-scene-item>
    </div>
  </div>
</ng-scene>

easing

Props

name type default description
css boolean false Check to play with CSS
autoplay boolean false Check to play automatically
from(ng-scene-item) object Start properties. only
to(ng-scene-item) object End properties
keyframes(ng-scene-item) object Specify properties by time. If not keyframes, use from, to, and duration.
...options Check out the options

Events

The event prefix is ng

<ng-scene-item [delay]=1 [duration]=2 (nganimate)="animate($event)" (ngplay)="play($event)" ngpaused="paused($event)">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</ng-scene-item>