https://github.com/daybrush/scenejs-effects
🎬 ✨ Effect collection library where you can add effects with Scene.js.
https://github.com/daybrush/scenejs-effects
animation css effect effects flip javascript motion scenejs shake typewriter typewriter-effect typing
Last synced: 7 months ago
JSON representation
🎬 ✨ Effect collection library where you can add effects with Scene.js.
- Host: GitHub
- URL: https://github.com/daybrush/scenejs-effects
- Owner: daybrush
- Created: 2019-05-11T17:41:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-05-21T17:41:10.000Z (over 2 years ago)
- Last Synced: 2025-03-24T09:38:21.398Z (8 months ago)
- Topics: animation, css, effect, effects, flip, javascript, motion, scenejs, shake, typewriter, typewriter-effect, typing
- Language: TypeScript
- Homepage: http://daybrush.com/scenejs/
- Size: 1.35 MB
- Stars: 45
- Watchers: 4
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Scene.js Effects
🎬✨ Effect collection library where you can add effects with Scene.js
About Scene.js / API / Features / Examples
## ⚙ ️Installation
### npm
```bash
$ npm install @scenejs/effects
```
### script
```html
```
## 🛠️ How to use
```ts
import { shake, flip, fadeIn, wipeIn } from "@scenejs/effects";
Scene
.shake()
.setDuration(1)
.setSelector(".className")
.play();
```
## ✨ Effects
* [**kineticFrame**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.kineticFrame): Create a frame that moves the origin in the opposite direction as it moves through the transform. ([CodePen](https://codepen.io/daybrush/pen/NZrVGv))
[](https://codepen.io/daybrush/pen/NZrVGv)
* [**typing**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.typing): Make a typing effect that is typed one character at a time like a typewriter. ([CodePen](https://codepen.io/daybrush/pen/ydOVPW))
[](https://daybrush.com/scenejs/features.html#typing)
* [**keyframer**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.keyframer): Make the CSS Keyframes Playable Animator(SceneItem). ([CodePen](https://codepen.io/daybrush/pen/XLjjBE))
[](https://codepen.io/daybrush/pen/XLjjBE)
```html
@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);
}
}
```
```js
import { keyframer } from "@scenejs/effects";
keyframer("keyframes", {
duration: 1,
iterationCount: "infinite",
selector: ".rect",
}).play();
```
* [**shake**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.shake): Make a shake effect. ([CodePen](https://codepen.io/daybrush/pen/NZNRYv))
[](https://daybrush.com/scenejs/features.html#shake)
* [**shakeX**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.shakeX): Make a horizontal shake effect. ([CodePen](https://codepen.io/daybrush/pen/orxzPN))
[](https://daybrush.com/scenejs/features.html#shakex)
* [**shakeY**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.shakeY): Make a vertical shake effect. ([CodePen](https://codepen.io/daybrush/pen/NZNRLa))
[](https://daybrush.com/scenejs/features.html#shakey)
* [**flip**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.flip): You can create a flip effect horizontally, vertically, or diagonally. ([CodePen](https://codepen.io/daybrush/pen/EBKgeM))
[](https://daybrush.com/scenejs/features.html#flip)
* [**flipX**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.flipX): You can create an effect that flips vertically around the x-axis. ([CodePen](https://codepen.io/daybrush/pen/NZNRew))
[](https://daybrush.com/scenejs/features.html#flipx)
* [**flipY**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.flipY): You can create an effect that flips horizontally around the y-axis. ([CodePen](https://codepen.io/daybrush/pen/VJaKNe))
[](https://daybrush.com/scenejs/features.html#flipy)
* [**transition**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.transition): Switch the scene from `item1` to `item2`. ([CodePen](https://codepen.io/daybrush/pen/QXKGam))
[](https://daybrush.com/scenejs/features.html#transition)
* [**fadeIn**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.fadeIn): Make a fade in effect. ([CodePen](https://codepen.io/daybrush/pen/gNrwJm))
[](https://daybrush.com/scenejs/features.html#fadein)
* [**fadeOut**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.fadeOut): Make a fade out effect. ([CodePen](https://codepen.io/daybrush/pen/pXyEmZ))
[](https://daybrush.com/scenejs/features.html#fadeout)
* [**blink**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.blink): Make a blink effect. ([CodePen](https://codepen.io/daybrush/pen/MMyKRP))
[](https://daybrush.com/scenejs/features.html#blink)
* [**wipeIn**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.wipeIn): Make a wipe in effect. ([CodePen](https://codepen.io/daybrush/pen/LKNpjm))
[](https://daybrush.com/scenejs/features.html#wipein)
* [**wipeOut**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.wipeOut): Make a wipe out effect. ([CodePen](https://codepen.io/daybrush/pen/KjzgOB))
[](https://daybrush.com/scenejs/features.html#wipeout)
## 👏 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](https://github.com/daybrush/scenejs-effects/issues) on GitHub.
## 📝 License
```
MIT License
Copyright (c) 2019 Daybrush
```