{"id":13534216,"url":"https://github.com/daybrush/scenejs","last_synced_at":"2025-05-14T07:09:02.428Z","repository":{"id":39898089,"uuid":"86044162","full_name":"daybrush/scenejs","owner":"daybrush","description":"🎬 Scene.js is JavaScript \u0026 CSS timeline-based animation library","archived":false,"fork":false,"pushed_at":"2023-06-19T22:39:08.000Z","size":17408,"stargazers_count":2753,"open_issues_count":26,"forks_count":161,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-05-04T16:02:52.547Z","etag":null,"topics":["angular","animation","css3","css3-animation","graphic","javascript","javascript-animation","javascript-animation-library","motion","preact","react","scene","scenejs","timeline","typescript","vue"],"latest_commit_sha":null,"homepage":"https://daybrush.com/scenejs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daybrush.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"daybrush","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-03-24T08:20:40.000Z","updated_at":"2025-04-23T18:40:18.000Z","dependencies_parsed_at":"2023-09-29T08:53:45.370Z","dependency_job_id":null,"html_url":"https://github.com/daybrush/scenejs","commit_stats":{"total_commits":465,"total_committers":12,"mean_commits":38.75,"dds":0.4408602150537635,"last_synced_commit":"da1b4eb7c045d3f7133d2bb63fe29d1080be9639"},"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daybrush%2Fscenejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daybrush%2Fscenejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daybrush%2Fscenejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daybrush%2Fscenejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daybrush","download_url":"https://codeload.github.com/daybrush/scenejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253042671,"owners_count":21845190,"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":["angular","animation","css3","css3-animation","graphic","javascript","javascript-animation","javascript-animation-library","motion","preact","react","scene","scenejs","timeline","typescript","vue"],"created_at":"2024-08-01T07:01:28.140Z","updated_at":"2025-05-14T07:08:57.416Z","avatar_url":"https://github.com/daybrush.png","language":"TypeScript","readme":"\n\u003cp align=\"middle\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/images/clapperboard.png\" width=\"250\"/\u003e\u003c/p\u003e\n\u003ch2 align=\"middle\"\u003eScene.js\u003c/h2\u003e\n\u003cp align=\"middle\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/scenejs\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/scenejs.svg?style=flat-square\u0026color=007acc\u0026label=version\" alt=\"npm version\" /\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square\"/\u003e\n\u003ca href=\"https://github.com/daybrush/scenejs/actions\" target=\"_blank\"\u003e\u003cimg alt=\"Github actions\" src=\"https://img.shields.io/github/actions/workflow/status/daybrush/scenejs/test.yml?branch=master\u0026style=flat-square\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://coveralls.io/github/daybrush/scenejs?branch=master\u0026style=flat-square\" target=\"_blank\"\u003e\u003cimg alt=\"Coveralls github\" src=\"https://img.shields.io/coveralls/github/daybrush/scenejs.svg?style=flat-square\u0026label=%E2%9C%85%20coverage\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/daybrush/scenejs/blob/master/LICENSE\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/github/license/daybrush/scenejs.svg?style=flat-square\u0026label=license\u0026color=08CE5D\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/daybrush/scenejs/tree/master/packages/react-scenejs\" target=\"_blank\"\u003e\u003cimg alt=\"React\" src=\"https://img.shields.io/static/v1.svg?label=\u0026message=React\u0026style=flat-square\u0026color=61daeb\"\u003e\u003c/a\u003e \n\u003ca href=\"https://github.com/daybrush/scenejs/tree/master/packages/vue2-scenejs\" target=\"_blank\"\u003e\u003cimg\n    alt=\"Vue 2\"\n    src=\"https://img.shields.io/static/v1.svg?label=\u0026message=Vue2\u0026style=flat-square\u0026color=3fb984\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/daybrush/scenejs/tree/master/packages/vue-scenejs\" target=\"_blank\"\u003e\u003cimg\n    alt=\"Vue 3\"\n    src=\"https://img.shields.io/static/v1.svg?label=\u0026message=Vue%203\u0026style=flat-square\u0026color=3fb984\"\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/daybrush/scenejs/tree/master/packages/svelte-scenejs\" target=\"_blank\"\u003e\u003cimg alt=\"Svelte\" src=\"https://img.shields.io/static/v1.svg?label=\u0026message=Svelte\u0026style=flat-square\u0026color=C82B38\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003cp align=\"middle\"\u003e🎬 Scene.js is an JavaScript \u0026 CSS timeline-based animation library.\u003c/p\u003e\n\n\u003cp align=\"middle\"\u003e\u003ca href=\"https://daybrush.com/scenejs\"\u003e\u003cstrong\u003eOfficial Site\u003c/strong\u003e\u003c/a\u003e \u0026nbsp;/\u0026nbsp; \u003ca href=\"https://daybrush.com/scenejs/release/latest/doc\"\u003e\u003cstrong\u003eAPI\u003c/strong\u003e\u003c/a\u003e \u0026nbsp;/\u0026nbsp; \u003ca href=\"https://daybrush.com/scenejs/features.html\"\u003e\u003cstrong\u003eFeatures\u003c/strong\u003e\u003c/a\u003e \u0026nbsp;/\u0026nbsp; \u003ca href=\"https://codepen.io/collection/DLWxrd/\"\u003e\u003cstrong\u003eExamples\u003c/strong\u003e\u003c/a\u003e \u0026nbsp;/\u0026nbsp; \u003ca href=\"https://github.com/daybrush/scena\"\u003e\u003cstrong\u003eMain Project\u003c/strong\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cbr/\u003e\n\u003cp align=\"middle\" style=\"max-width: 1000px; margin: 0px auto;\" \u003e\n  \u003ca href=\"https://codepen.io/daybrush/pen/arQpYb\" target=\"_blank\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/images/daybrush.gif\" width=\"280\" style=\"min-width:200px;max-width:320px;width: 32%;\"/\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://codepen.io/daybrush/pen/EQPPBg\" target=\"_blank\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/images/tree.gif\" width=\"280\" style=\"min-width:200px;max-width:320px;width: 32%;\"/\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://codepen.io/daybrush/pen/QYRyMd\" target=\"_blank\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/images/card.gif\" width=\"280\" style=\"min-width:200px;max-width:320px;width: 32%;\"/\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://codepen.io/daybrush/pen/zWMeJW\" target=\"_blank\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/images/circleburst.gif\" width=\"280\" style=\"min-width:200px;max-width:320px;width: 32%;\"/\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://codepen.io/daybrush/pen/aYPjjM\" target=\"_blank\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/example/scenejs.gif\" width=\"280\" style=\"min-width:200px;max-width:320px;width: 32%;\"/\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://codepen.io/daybrush/pen/ydMJKR\" target=\"_blank\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/images/panda.gif\" width=\"280\" style=\"min-width:200px;max-width:320px;width: 32%;\"/\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://codepen.io/daybrush/pen/vRrbXG\" target=\"_blank\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/example/raindrop.gif\" width=\"280\" style=\"min-width:200px;max-width:320px;width: 32%;\"/\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://codepen.io/daybrush/pen/RMBXBm\" target=\"_blank\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/example/search.gif\" width=\"280\" style=\"min-width:200px;max-width:320px;width: 32%;\"/\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://codepen.io/daybrush/pen/pLxQGY\" target=\"_blank\"\u003e\u003cimg src=\"https://daybrush.com/scenejs/example/motion.gif\" width=\"280\" style=\"min-width:200px;max-width:320px;width: 32%;\"/\u003e\u003c/a\u003e\u0026nbsp;\n\u003c/p\u003e\n\n\n## 🚀 Examples\n* [ClapperBoard Animation](https://codepen.io/daybrush/pen/VRomqr)\n* [Panda eating Bamboo Animation](https://codepen.io/daybrush/pen/ydMJKR)\n* [Circle Burst](https://codepen.io/daybrush/pen/zWMeJW)\n* [Motion Effect](https://codepen.io/daybrush/pen/pLxQGY)\n* [Tree Animation](https://codepen.io/daybrush/pen/EQPPBg)\n* [Snow Animation](https://codepen.io/daybrush/pen/eoYGrx)\n* [Card Rotation](https://codepen.io/daybrush/pen/QYRyMd)\n* [Raindrop Effect](https://codepen.io/daybrush/pen/vRrbXG)\n* [Cube](https://codepen.io/daybrush/pen/ybxwpV)\n* [Shape](https://codepen.io/daybrush/pen/VXVgpE) \n* [Timer](https://codepen.io/daybrush/pen/OdMMXd)\n\n[**More Examples**](https://codepen.io/collection/DLWxrd/)\n\n\n## ⚙️ Installation\n```bash\n$ npm install scenejs\n```\n```html\n\u003cscript src=\"//daybrush.com/scenejs/release/latest/dist/scene.min.js\"\u003e\u003c/script\u003e\n```\n\n## 📄 Documents\n* [API Documentation](https://daybrush.com/scenejs/release/latest/doc/)\n* [Features Documentation](https://daybrush.com/scenejs/features.html)\n\n## 📦 Packages\n|Package|Version|Description|\n|---|---|---|\n|[**react-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/react-scenejs)|[![](https://img.shields.io/npm/v/react-scenejs.svg?style=flat-square)](https://npmjs.com/package/react-scenejs)|A React Component that create JavaScript \u0026 CSS timeline-based animation with Scene.js.|\n|[**svelte-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/svelte-scenejs)|[![](https://img.shields.io/npm/v/svelte-scenejs.svg?style=flat-square)](https://npmjs.com/package/svelte-scenejs)|A Svelte Component that create JavaScript \u0026 CSS timeline-based animation with Scene.js.|\n|[**vue-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/vue3-scenejs)|[![](https://img.shields.io/npm/v/vue-scenejs.svg?style=flat-square)](https://npmjs.com/package/vue-scenejs)|A Vue 3 Component that create JavaScript \u0026 CSS timeline-based animation with Scene.js.|\n|[**vue2-scenejs**](https://github.com/daybrush/scenejs/tree/master/packages/vue-scenejs)|[![](https://img.shields.io/npm/v/vue2-scenejs.svg?style=flat-square)](https://npmjs.com/package/vue2-scenejs)|A Vue 2 Component that create JavaScript \u0026 CSS timeline-based animation with Scene.js.|\n|[**@scenejs/render**](https://github.com/daybrush/scenejs-render)|[![](https://img.shields.io/npm/v/@scenejs/render.svg?style=flat-square)](https://npmjs.com/package/@scenejs/render)|Make a movie of CSS animation through Scene.js.|\n|[**@scenejs/effects**](https://github.com/daybrush/scenejs-effects)|[![](https://img.shields.io/npm/v/@scenejs/effects.svg?style=flat-square)](https://npmjs.com/package/@scenejs/effects)|Effect collection library where you can add scene effects to Scene.js.|\n|[**@scenejs/timeline**](https://github.com/daybrush/scenejs-timeline)|[![](https://img.shields.io/npm/v/@scenejs/timeline.svg?style=flat-square)](https://npmjs.com/package/@scenejs/timeline)|A library that represents the timeline of Scene.js. You can control time, properties, and items.|\n|[**@scenejs/media**](https://github.com/daybrush/scenejs-media)|[![](https://img.shields.io/npm/v/@scenejs/media.svg?style=flat-square)](https://npmjs.com/package/@scenejs/media)|A library for playing or controlling media with Scene.js.|\n|[**@scenejs/iframe**](https://github.com/daybrush/scenejs-iframe)|[![](https://img.shields.io/npm/v/@scenejs/iframe.svg?style=flat-square)](https://npmjs.com/package/@scenejs/iframe)|A library that control the animation of iframe with Scene.js.|\n\n\n## 🎬 Make Scene\n```javascript\nimport Scene from \"scenejs\";\n\nconst scene = new Scene({\n  \".class\": {\n    0: \"left: 0px; top: 0px; transform: translate(0px);\",\n    1: {\n      \"left\": \"100px\",\n      \"top\": \"0px\",\n      transform: \"translate(50px)\",\n    },\n    2: {\n      \"left\": \"200px\",\n      \"top\": \"100px\",\n      transform: {\n        translate: \"100px\",\n      },\n    }\n  }\n}, {\n  selector: true,\n  easing: \"ease-in-out\",\n}).play();\n```\n## 🎬 Add Media (Audio/Video)\nThis library supports adding video and audio components to your scene. To add a video or an audio, you need to install @scenejs/media library.\n### Add necessary npm package\n```sh\n$ npm i @scenejs/media\n```\n### How to use\n```javascript\n\nimport MediaScene from '@scenejs/media';\n\nconst mediaScene = new MediaScene();\n    mediaScene\n        .addMedia(\"background\", \"./background.mp3\")\n        .seek(0, 40.79);\n    \n    mediaScene\n        .addMedia(\"video\", \"./video.mp4\")\n        .seek(0, 40.79)\n        .setVolume(1)\n        .setPlaySpeed(1)\n        .setDelay(startTime);\n\n    scene.setItem(\"video\",mediaScene);\n```\nPlease note that this library uses the built-in capability of your browser to play audio and video files. Make sure necessary codecs are installed, and the browser supports the video/audio file being added to the project\n\n## ✨ Effects\n\n* [typing](https://daybrush.com/scenejs/features.html#typing)\n* [flip](https://daybrush.com/scenejs/features.html#flip)\n* [flipX](https://daybrush.com/scenejs/features.html#flipx)\n* [flipY](https://daybrush.com/scenejs/features.html#flipy)\n* [shake](https://daybrush.com/scenejs/features.html#shake)\n* [shakeX](https://daybrush.com/scenejs/features.html#shakex)\n* [shakeY](https://daybrush.com/scenejs/features.html#shakey)\n* [wipeIn](https://daybrush.com/scenejs/features.html#wipein)\n* [wipeOut](https://daybrush.com/scenejs/features.html#wipeout)\n* [zoomIn](https://daybrush.com/scenejs/features.html#zoomin)\n* [zoomOut](https://daybrush.com/scenejs/features.html#zoomout)\n* [blink](https://daybrush.com/scenejs/features.html#bllink)\n* [fadeIn](https://daybrush.com/scenejs/features.html#fadein)\n* [fadeOut](https://daybrush.com/scenejs/features.html#fadeout)\n* [transition](https://daybrush.com/scenejs/features.html#transition)\n\n\n## 🌐 Supported Browsers\n\n|Internet Explorer|Chrome|FireFox|Safari|Opera|\n|---|---|---|---|---|\n|9+(10+ playCSS)|latest|latest|latest|latest|\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\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](https://github.com/daybrush/scenejs/issues) or give me a Pull Request freely.\n\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\n\u003ca href=\"https://github.com/daybrush/scenejs/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=daybrush/scenejs\" /\u003e\n\u003c/a\u003e\n\n\n## Sponsors\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://daybrush.com/sponsors/sponsors.svg\"\u003e\n\t\t\u003cimg src=\"https://daybrush.com/sponsors/sponsors.svg\"/\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/scenejs/issues) on GitHub.\n\n\n\n## 📝 License\n\nThis project is [MIT](https://github.com/daybrush/scenejs/blob/master/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2016 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","funding_links":["https://github.com/sponsors/daybrush"],"categories":["TypeScript","Animation","Libraries"],"sub_categories":["React Components","JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaybrush%2Fscenejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaybrush%2Fscenejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaybrush%2Fscenejs/lists"}