{"id":20622599,"url":"https://github.com/myterminal/dom-shift","last_synced_at":"2026-04-27T05:02:14.151Z","repository":{"id":52679114,"uuid":"348092255","full_name":"myTerminal/dom-shift","owner":"myTerminal","description":"A minimal library to switch DOM states using a CSS class","archived":false,"fork":false,"pushed_at":"2022-08-20T05:08:21.000Z","size":300,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-17T05:29:39.031Z","etag":null,"topics":["animation","dom","html"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/myTerminal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-15T19:08:12.000Z","updated_at":"2022-08-03T23:50:57.000Z","dependencies_parsed_at":"2022-08-20T14:21:06.856Z","dependency_job_id":null,"html_url":"https://github.com/myTerminal/dom-shift","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Fdom-shift","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Fdom-shift/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Fdom-shift/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myTerminal%2Fdom-shift/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/myTerminal","download_url":"https://codeload.github.com/myTerminal/dom-shift/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242300867,"owners_count":20105310,"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","dom","html"],"created_at":"2024-11-16T12:23:54.231Z","updated_at":"2026-04-27T05:02:09.123Z","avatar_url":"https://github.com/myTerminal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dom-shift\n\n[![npm version](https://badge.fury.io/js/dom-shift.svg)](https://badge.fury.io/js/dom-shift)\n[![npm downloads](https://img.shields.io/npm/dt/dom-shift.svg)](https://www.npmjs.com/package/dom-shift)\n[![License](https://img.shields.io/github/license/myTerminal/dom-shift.svg)](https://opensource.org/licenses/MIT)  \n[![Build Status](https://travis-ci.org/myTerminal/dom-shift.svg?branch=master)](https://travis-ci.org/myTerminal/dom-shift)\n[![Code Climate](https://codeclimate.com/github/myTerminal/dom-shift.png)](https://codeclimate.com/github/myTerminal/dom-shift)\n[![js-myterminal-style](https://img.shields.io/badge/code%20style-myterminal-blue.svg)](https://www.npmjs.com/package/eslint-config/myterminal)\n[![Coverage Status](https://img.shields.io/coveralls/myTerminal/dom-shift.svg)](https://coveralls.io/r/myTerminal/dom-shift?branch=master)  \n[![NPM](https://nodei.co/npm/dom-shift.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/dom-shift/)\n\nA minimal library to switch DOM states using a CSS class.\n\n## How to Use\n\n### Directly from a web page\n\nOne can use *dom-shift* directly from a web-page by attaching the *dom-shift.js* to the DOM.\n\n    \u003c!-- Attaching the dom-shift script --\u003e\n    \u003cscript type=\"text/javascript\" src=\"path/to/library/dom-shift.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Usage --\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        domShift.init();\n    \u003c/script\u003e\n\n### With [Webpack](https://webpack.js.org), [Browserify](http://browserify.org) or [RequireJS](http://requirejs.org)\n\nInstall *dom-shift* from NPM\n\n    npm install dom-shift --save-dev\n\nConsume as an ES6 module\n\n    import * as domShift from 'dom-shift';\n\nor\n\n    import { executeAfterDelay, shiftDom } from 'dom-shift';\n\nConsume as a CommonJS module\n\n    var domShift = require('dom-shift');\n\nConsume as an AMD\n\n    require(['dom-shift'], function (domShift) {\n        // Consume domShift\n    }\n\nNote: You may have to use [Babel](https://babeljs.io) for ES6 transpilation.\n\n### Simple usage\n\n1. Import *dom-shift* functions\n\n        import { executeAfterDelay, shiftDom } from 'dom-shift';\n\n2. Shift DOM through states\n\n        shiftDom(\n            [\n                {\n                    name: 'start-logs',\n                    step: done =\u003e {\n                        executeAfterdelay(done, 2000)\n                    },\n                }, // Adds a CSS class 'state-start-logs' to body tag and runs for 2000 milliseconds\n                {\n                    name: 'spawn-terminal',\n                    step: () =\u003e {\n                        print(\n                            document.querySelector('.frame'),\n                            mateInstall,\n                            30\n                        );\n                    },\n                    duration: 4000\n                }, // Adds a CSS class 'state-spawn-terminal to body tag and runs for 4000 milliseconds\n                {\n                    name: 'flip',\n                    step: () =\u003e {},\n                    duration: 1500\n                }  // Adds a CSS class 'state-flip to body tag and runs for 1500 milliseconds\n            ]\n        );\n\nYou can either use the function `executeAfterDelay` as shown in the example or use the key `duration` to supply a step duration in milliseconds.\n\n## Demo [coming-soon]\n\nYou can view a demo [here](https://myterminal.github.io/dom-shift/examples).\n\n## To-do\n\n* Write unit-tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyterminal%2Fdom-shift","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmyterminal%2Fdom-shift","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyterminal%2Fdom-shift/lists"}