This package has been deprecated

Author message:

Please use 'vue-scenejs'

vue-scene

Vue Scene.js

🎬 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"
    @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.
...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