Angular Scene.js

🎬 An Angular Component that create JavaScript & CSS timeline-based animation with Scene.js.

About Scene.js  /  API  /  Features  /  CodeSandbox Demo

Installation

$ npm install ngx-scenejs

Make scene

• app.module.ts

import { NgxSceneComponent, NgxSceneItemComponent, NgxSceneModule } from "ngx-scenejs";

@NgModule({
  declarations: [
    NgxSceneComponent,
  ],
})

• app.component.ts

@Component(...)
export class AppComponent {
  keyframes = {
    ".circles .circle": (i: number) => ({
      0: {
        "border-width": "150px",
        "opacity": 1,
        "transform": "translate(-50%, -50%) scale(0)",
      },
      1.5: {
        "border-width": "0px",
        "opacity": 0.3,
        "transform": "scale(0.7)",
      },
      options: {
        delay: i * 0.4,
      },
    }),
  };
}

• app.component.html

<ngx-scene
  [keyframes]="keyframes"
  easing="ease-in-out"
  fillMode="forwards"
  direction="normal"
  [iterationCount]="1"
  [playSpeed]="1"
  [time]="0"
  [css]="false"
  [autoplay]="false"
  (scenePlay)="onPlay($event)"
  (scenePaused)="onPaused($event)"
  (sceneEnded)="onEnded($event)"
  (sceneAnimate)="onAnimate($event)"
  (sceneTimeUpdate)="onTimeUpdate($event)"
  (sceneIteration)="onIteration($event)"
>
  <div className="circles">
    <div className="circle circle1"></div>
    <div className="circle circle2"></div>
    <div className="circle circle3"></div>
  </div>
</ngx-scene>

Props

name	type	default	description
css	boolean	false	Check to play with CSS
autoplay	boolean	false	Check to play automatically
keyframes	object	{}	Specify properties by time.
...options			Check out the options
...events			Check out Scene's events Check out SceneItem's events

Development

This project was generated with Angular CLI version 8.0.1.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

License

MIT License

Copyright (c) 2016 Daybrush