Scene.js - Library to Create Timeline-Based Animation

       0

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.

  .animate {
     animation-name: keyframes1;
     animation-duration: 4;
     animation-iteration-count: 3;
     animation-timing-function: ease-in-out;
  }
  @keyframes keyframes1 {
     0% {
        left: 0%;
    }
     50% {
       left: 50%;
    }
      100% {
        left: 30%;
    }
 }

 new Scene({
    ".animte": {
       0: {
          left: "0%",
       },
       2: {
          left: "50%",
       },
       4: {
          left: "30%",
       },
   },
 }, {
    selector: true,
    iterationCount: 3,
    easing: "ease-in-out",
 }).playCSS();

 /* CSS */
   .selector {
       animation-name: a;
       animation-duration: 3s;
       animation-timing-function: ease;
       -webkit-animation-name: a;
       -webkit-animation-duration: 3s;
       -webkit-timing-function: ease;
       -moz-animation-name: a;
       -moz-animation-duration: 3s;
       -moz-timing-function: ease;
    }
    @keyframes a {
      0% {
         transform: translate(0px);
      }
      100% {
         transform: translate(100px);
      }
   }
  @-webkit-keyframes a {
     0% {
        -webkit-transform: translate(0px);
    }
    100% {
        -webkit-transform: translate(100px);
    }
  }
  @-moz-keyframes a {
    0% {
       -moz-transform: translate(0px);
    }
    100% {
       -moz-transform: translate(100px);
    }
 }

 
  /* Scene.js */
    new Scene({
       ".selector": {
        0: {
            transform: {
            tranlsate: "0px",
        },
      },
        1: {
           transform: {
           tranlsate: "100px",
        },
     },
   },  
  }, {
     duration: 3,
     easing: "ease",
  }).playCSS();

• Interaction and Intercontrol: Sometimes animation requires dynamic changes through interactions such as mice, keyboards, browsers, and other DOM events. Because it is difficult to control with static CSS animation, Javascript animation must be used.
• Supports attributes that cannot be expressed in CSS: HTML, DOM Attributes cannot be implemented as CSS and some properties are not supported by the browser. Internet Explorer does not support CSS animation, and SVG animation has very limited browsers that support CSS animation. In this case, you must use JavaScript animation

Scene.js provides as constants the easing supported by CSS and can show the same look no matter how JavaScript and CSS play. You can also create and use your own easing even if it is not supported by CSS.
 
 /* CSS Easing */
 {
    easing: Scene.EASE_IN, // EASE_OUT, EASE_IN_OUT, ...
 }
  /* Custom */
 {
    easing: t => 1 - Math.pow(t, 3),
 }

npm install scenejs

<script src="//daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>