Awesome

<img src="https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/logo.png" width="250"/> <h2 align="middle">Scene.js Effects</h2> <a href="https://badge.fury.io/js/%40scenejs%2Feffects" target="_blank"><img src="https://badge.fury.io/js/%40scenejs%2Feffects.svg" alt="npm version" height="18"/></a> <img src="https://img.shields.io/badge/language-typescript-blue.svg"/> <a href="https://github.com/daybrush/scenejs/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/badge/License-MIT-brightgreen.svg"/></a> 🎬✨ Effect collection library where you can add effects with <a href="https://github.com/daybrush/scenejs" target="_blank">Scene.js</a> <a href="https://github.com/daybrush/scenejs">About Scene.js</a>  /  <a href="https://daybrush.com/scenejs-effects/release/latest/doc">API</a>  /  <a href="https://daybrush.com/scenejs/features.html#effects">Features</a>  /  <a href="https://codepen.io/collection/XwqoGW/">Examples</a>

⚙ ️Installation

npm

$ npm install @scenejs/effects

script

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

🛠️ How to use

import { shake, flip, fadeIn, wipeIn } from "@scenejs/effects";

Scene
    .shake()
    .setDuration(1)
    .setSelector(".className")
    .play();

✨ Effects

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)

👏 Contributing

If you have any questions or requests or want to contribute to scenejs or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issues on GitHub.

📝 License

MIT License

Copyright (c) 2019 Daybrush