Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ngx-scenejs with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. var ngxScenejs = require("ngx-scenejs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngx-scenejs v1.1.1

Angular Scene.js

npm version

🎬 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,
    // NgxSceneItemComponent,
  ],
   imports: [
    BrowserModule,
    NgxMoveableModule,
  ],
})
  • 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"
  [ready]="true"
  (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

nametypedefaultdescription
cssbooleanfalseCheck to play with CSS
autoplaybooleanfalseCheck to play automatically
keyframesobject{}Specify properties by time.
readybooleantrueCheck if you are ready to init and play.
...optionsCheck out the options
...eventsCheck 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
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free