Scene.js Effects
About Scene.js / API / Features / Examples
⚙ ️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();
-
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
toitem2
. (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