{"id":15063251,"url":"https://github.com/daybrush/scenejs-effects","last_synced_at":"2025-04-10T10:42:49.003Z","repository":{"id":57139349,"uuid":"186163788","full_name":"daybrush/scenejs-effects","owner":"daybrush","description":"🎬 ✨ Effect collection library where you can add effects with Scene.js.","archived":false,"fork":false,"pushed_at":"2023-05-21T17:41:10.000Z","size":1415,"stargazers_count":45,"open_issues_count":2,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T09:38:21.398Z","etag":null,"topics":["animation","css","effect","effects","flip","javascript","motion","scenejs","shake","typewriter","typewriter-effect","typing"],"latest_commit_sha":null,"homepage":"http://daybrush.com/scenejs/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daybrush.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-11T17:41:53.000Z","updated_at":"2024-10-28T14:36:24.000Z","dependencies_parsed_at":"2024-06-18T19:48:52.582Z","dependency_job_id":"52849c01-7067-4c09-b26f-38713465f255","html_url":"https://github.com/daybrush/scenejs-effects","commit_stats":{"total_commits":46,"total_committers":2,"mean_commits":23.0,"dds":"0.10869565217391308","last_synced_commit":"784ad82dfc6b6ec626ac1f52e50db275c2db29a0"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daybrush%2Fscenejs-effects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daybrush%2Fscenejs-effects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daybrush%2Fscenejs-effects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daybrush%2Fscenejs-effects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daybrush","download_url":"https://codeload.github.com/daybrush/scenejs-effects/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248199864,"owners_count":21063774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","effect","effects","flip","javascript","motion","scenejs","shake","typewriter","typewriter-effect","typing"],"created_at":"2024-09-24T23:54:01.051Z","updated_at":"2025-04-10T10:42:48.986Z","avatar_url":"https://github.com/daybrush.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"middle\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/logo.png\" width=\"250\"/\u003e\u003c/p\u003e\n\u003ch2 align=\"middle\"\u003eScene.js Effects\u003c/h2\u003e\n\u003cp align=\"middle\"\u003e\u003ca href=\"https://badge.fury.io/js/%40scenejs%2Feffects\" target=\"_blank\"\u003e\u003cimg src=\"https://badge.fury.io/js/%40scenejs%2Feffects.svg\" alt=\"npm version\" height=\"18\"/\u003e\u003c/a\u003e \u003cimg src=\"https://img.shields.io/badge/language-typescript-blue.svg\"/\u003e \u003ca href=\"https://github.com/daybrush/scenejs/blob/master/LICENSE\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-brightgreen.svg\"/\u003e\u003c/a\u003e\u003c/p\u003e\n\n\n\u003cp align=\"middle\"\u003e🎬✨ Effect collection library where you can add effects with \u003ca href=\"https://github.com/daybrush/scenejs\" target=\"_blank\"\u003e\u003cstrong\u003eScene.js\u003c/strong\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"middle\"\u003e\u003ca href=\"https://github.com/daybrush/scenejs\"\u003e\u003cstrong\u003eAbout Scene.js\u003c/strong\u003e\u003c/a\u003e \u0026nbsp;/\u0026nbsp; \u003ca href=\"https://daybrush.com/scenejs-effects/release/latest/doc\"\u003e\u003cstrong\u003eAPI\u003c/strong\u003e\u003c/a\u003e \u0026nbsp;/\u0026nbsp; \u003ca href=\"https://daybrush.com/scenejs/features.html#effects\"\u003e\u003cstrong\u003eFeatures\u003c/strong\u003e\u003c/a\u003e \u0026nbsp;/\u0026nbsp; \u003ca href=\"https://codepen.io/collection/XwqoGW/\"\u003e\u003cstrong\u003eExamples\u003c/strong\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cbr/\u003e\n\n## ⚙ ️Installation\n### npm\n```bash\n$ npm install @scenejs/effects\n```\n### script\n```html\n\u003cscript src=\"//daybrush.com/scenejs/release/latest/dist/scene.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//daybrush.com/scenejs-effects/release/latest/dist/effects.min.js\"\u003e\u003c/script\u003e\n```\n\n## 🛠️ How to use\n```ts\nimport { shake, flip, fadeIn, wipeIn } from \"@scenejs/effects\";\n\nScene\n    .shake()\n    .setDuration(1)\n    .setSelector(\".className\")\n    .play();\n\n```\n\n## ✨ Effects\n* [**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))\u003cbr/\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/kineticFrame.gif)](https://codepen.io/daybrush/pen/NZrVGv)\n\n* [**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))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/typing.gif)](https://daybrush.com/scenejs/features.html#typing)\n\n* [**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))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/keyframer.gif)](https://codepen.io/daybrush/pen/XLjjBE)\n```html\n\u003cstyle\u003e\n@keyframes keyframes {\n    0%, 7.69% {\n      border-width:35px;\n      transform: translate(-50%, -50%) scale(0);\n    }\n    84.61% {\n      border-width: 0px;\n      transform: translate(-50%, -50%) scale(1);\n    }\n    100% {\n      border-width: 0px;\n      transform: translate(-50%, -50%) scale(1);\n    }\n}\n\u003c/style\u003e\n```\n```js\nimport { keyframer } from \"@scenejs/effects\";\n\nkeyframer(\"keyframes\", {\n    duration: 1,\n    iterationCount: \"infinite\",\n    selector: \".rect\",\n}).play();\n```\n\n* [**shake**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.shake): Make a shake effect. ([CodePen](https://codepen.io/daybrush/pen/NZNRYv))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/shake.gif)](https://daybrush.com/scenejs/features.html#shake)\n\n* [**shakeX**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.shakeX): Make a horizontal shake effect. ([CodePen](https://codepen.io/daybrush/pen/orxzPN))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/shakex.gif)](https://daybrush.com/scenejs/features.html#shakex)\n\n* [**shakeY**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.shakeY): Make a vertical shake effect. ([CodePen](https://codepen.io/daybrush/pen/NZNRLa))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/shakey.gif)](https://daybrush.com/scenejs/features.html#shakey)\n\n* [**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))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/flip.gif)](https://daybrush.com/scenejs/features.html#flip)\n\n* [**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))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/flipx.gif)](https://daybrush.com/scenejs/features.html#flipx)\n\n* [**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))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/flipy.gif)](https://daybrush.com/scenejs/features.html#flipy)\n\n* [**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))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/transition.gif)](https://daybrush.com/scenejs/features.html#transition)\n\n* [**fadeIn**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.fadeIn): Make a fade in effect. ([CodePen](https://codepen.io/daybrush/pen/gNrwJm))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/fadein.gif)](https://daybrush.com/scenejs/features.html#fadein)\n\n* [**fadeOut**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.fadeOut): Make a fade out effect. ([CodePen](https://codepen.io/daybrush/pen/pXyEmZ))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/fadeout.gif)](https://daybrush.com/scenejs/features.html#fadeout)\n\n* [**blink**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.blink): Make a blink effect. ([CodePen](https://codepen.io/daybrush/pen/MMyKRP))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/blink.gif)](https://daybrush.com/scenejs/features.html#blink)\n\n* [**wipeIn**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.wipeIn): Make a wipe in effect. ([CodePen](https://codepen.io/daybrush/pen/LKNpjm))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/wipein.gif)](https://daybrush.com/scenejs/features.html#wipein)\n\n* [**wipeOut**](http://daybrush.com/scenejs-effects/release/latest/doc/effects.html#.wipeOut): Make a wipe out effect. ([CodePen](https://codepen.io/daybrush/pen/KjzgOB))\u003cbr/\u003e\n[![](https://raw.githubusercontent.com/daybrush/scenejs-effects/master/demo/images/wipeout.gif)](https://daybrush.com/scenejs/features.html#wipeout)\n\n\n## 👏 Contributing\n\nIf 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.\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issues](https://github.com/daybrush/scenejs-effects/issues) on GitHub.\n\n## 📝 License\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaybrush%2Fscenejs-effects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaybrush%2Fscenejs-effects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaybrush%2Fscenejs-effects/lists"}