1.0.0 Release (2019-06-19)

🎬✨ Effect collection library where you can add effects with Scene.js

⚙ ️Installation

$ npm install @scenejs/effects

✨ Effects

CodePen Collection

• kineticFrame: Create a frame that moves the origin in the opposite direction as it moves through the transform. (CodePen)
  
                      

• typing: Make a typing effect that is typed one character at a time like a typewriter. (CodePen)
  
  

• keyframer: Make the CSS Keyframes Playable Animator(SceneItem). (CodePen)
  
  

<style>
@keyframes keyframes {
    0%, 7.69% {
      border-width:35px;
      transform: translate(-50%, -50%) scale(0);
    }
    84.61% {
      border-width: 0px;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      border-width: 0px;
      transform: translate(-50%, -50%) scale(1);
    }
}
</style>

import { keyframer } from "@scenejs/effects";

keyframer("keyframes", {
    duration: 1,
    iterationCount: "infinite",
    selector: ".rect",
}).play();

• shake: Make a shake effect. (CodePen)
  
  

• shakeX: Make a horizontal shake effect. (CodePen)
  
  

• shakeY: Make a vertical shake effect. (CodePen)
  
  

• flip: You can create a flip effect horizontally, vertically, or diagonally. (CodePen)
  
  

• flipX: You can create an effect that flips vertically around the x-axis. (CodePen)
  
  

• flipY: You can create an effect that flips horizontally around the y-axis. (CodePen)
  
  

• transition: Switch the scene from item1 to item2. (CodePen)
  
  

• fadeIn: Make a fade in effect. (CodePen)
  
  

• fadeOut: Make a fade out effect. (CodePen)
  
  

• blink: Make a blink effect. (CodePen)
  
  

• wipeIn: Make a wipe in effect. (CodePen)
  
  

• wipeOut: Make a wipe out effect. (CodePen)