npm is now a part of GitHub
❤Napoleon's Pixelated Mugshot

npm

Sign UpSign In
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

ngx-scenejs

1.1.1 • Public • Published

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

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.
ready boolean true Check if you are ready to init and play.
...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

Keywords

Install

npm i ngx-scenejs

DownloadsWeekly Downloads

1

Version

1.1.1

License

MIT

Unpacked Size

187 kB

Total Files

35

Homepage

daybrush.com/scenejs

Repository

Gitgithub.com/daybrush/scenejs/tree/master/packages/ngx-scenejs

Last publish

Collaborators

  • avatar
Try on RunKit
Report a vulnerability