Skip to content
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.
public
src
.browserslistrc
.gitignore
.npmignore
LICENSE
README.md
package-lock.json
package.json
postcss.config.js
rollup.config.js feat: add vue-scenejs for scenejs 1.0.0 (#34) Jun 1, 2019
tsconfig.build.json
tsconfig.declaration.json
tsconfig.json
tslint.json

README.md

Vue Scene.js

npm version

🎬 A Vue Component that create JavaScript & CSS timeline-based animation with Scene.js.

About Scene.js  /  API  /  Features  /  CodeSandbox Demo


Installation

$ npm install vue-scenejs

How to use

<template>
  <vue-scene
    :keyframes="keyframes"
    easing="ease-in-out"
    fillMode="forwards"
    direction="normal"
    :iterationCount="1"
    :playSpeed="1"
    :time="0"
    :css="false"
    :autoplay="false"
    :ready="true"
    @play="onPlay"
    @paused="onPaused"
    @ended="onEnded"
    @animate="onAnimate"
    @timeupdate="onTimeUpdate"
    @iteration="onIteration"
  >
    <div className="circles">
      <div className="circle circle1"></div>
      <div className="circle circle2"></div>
      <div className="circle circle3"></div>
    </div>
  </vue-scene>
</template>
<script>
  import { VueScene, VueSceneItem } from "vue-scenejs";

  export default {
    name: "App",
    components: {
      VueScene,
      VueSceneItem,
    },
    data: function () {
      return {
        keyframes: {
          ".circles .circle": i => ({
            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,
            },
          }),
        },
      };
    },
  };
</script>

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

Compiles and hot-reloads for development

npm run serve

License

MIT License

Copyright (c) 2016 Daybrush
You can’t perform that action at this time.