Skip to content
🎬 Effect collection library where you can add effects with Scene.js.
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/images fix: fix README Jun 18, 2019
src docs: add keyframer's docs Jun 18, 2019
.editorconfig chore: first commit May 11, 2019
.gitignore chore: Release 1.0.0 Jun 18, 2019
.npmignore chore: first commit May 11, 2019
README.md fix: fix README Jun 18, 2019
jsdoc.json
package-lock.json feat: add keyframes method Jun 18, 2019
package.json fix: fix package.json Jun 26, 2019
rollup.config.js fix: fix README May 19, 2019
tsconfig.declaration.json chore: first commit May 11, 2019
tsconfig.json chore: first commit May 11, 2019
tsconfig.test.json chore: first commit May 11, 2019
tslint.json chore: first commit May 11, 2019

README.md

Scene.js Effects

npm version

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

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 "@egjs/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();

👏 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
You can’t perform that action at this time.