{"id":16355970,"url":"https://github.com/timobechtel/transition-magic","last_synced_at":"2026-01-21T10:37:55.075Z","repository":{"id":38174788,"uuid":"267922752","full_name":"TimoBechtel/transition-magic","owner":"TimoBechtel","description":"Programatically set css transition state","archived":false,"fork":false,"pushed_at":"2023-03-04T21:09:34.000Z","size":1867,"stargazers_count":1,"open_issues_count":7,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-27T04:40:37.142Z","etag":null,"topics":["animation","css","javascript","transition","web"],"latest_commit_sha":null,"homepage":"https://timobechtel.github.io/transition-magic","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/TimoBechtel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-05-29T18:00:19.000Z","updated_at":"2023-03-07T02:39:31.000Z","dependencies_parsed_at":"2023-02-06T12:15:43.737Z","dependency_job_id":"fbebd971-28b7-4d41-b917-d7f8bd31856e","html_url":"https://github.com/TimoBechtel/transition-magic","commit_stats":{"total_commits":30,"total_committers":4,"mean_commits":7.5,"dds":0.7,"last_synced_commit":"729fddd0accf6238ff154c809eb4c06cfaab5586"},"previous_names":["timobechtel/transition-master"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Ftransition-magic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Ftransition-magic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Ftransition-magic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Ftransition-magic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimoBechtel","download_url":"https://codeload.github.com/TimoBechtel/transition-magic/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247779789,"owners_count":20994569,"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","javascript","transition","web"],"created_at":"2024-10-11T01:42:17.307Z","updated_at":"2026-01-21T10:37:55.043Z","avatar_url":"https://github.com/TimoBechtel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e✨ transition-magic\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eProgramatically set css transition progress\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/transition-magic\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/transition-magic.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/TimoBechtel/transition-magic/blob/main/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/license/TimoBechtel/transition-magic\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  ·\n  \u003ca href=\"https://github.com/TimoBechtel/transition-magic#readme\"\u003eHomepage\u003c/a\u003e\n  ·\n  \u003ca href=\"https://timobechtel.github.io/transition-magic\"\u003eView Demo\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/TimoBechtel/transition-magic/issues\"\u003eReport Bug / Request Feature\u003c/a\u003e\n  ·\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Installation](#Install)\n- [Usage](#usage)\n- [Test](#run-tests)\n- [Contact](#contact)\n- [Contributing](#Contributing)\n- [License](#license)\n\n## Install\n\n### NPM:\n\n```sh\nnpm install transition-magic\n```\n\n### Other:\n\nDownload https://unpkg.com/transition-magic/dist/index.umd.js and link it in your html head:\n\n```html\n\u003cscript src=\"index.umd.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### As module:\n\n```javascript\nimport { Transition } from 'transition-magic';\n```\n\nOr when linked in html head:\n\n```javascript\nconst { Transition } = transitionMagic;\n```\n\n### Example:\n\nCheckout the [demo](https://timobechtel.github.io/transition-magic).\n\n### Quick start:\n\n1. Create a transitionable object:\n\n```javascript\nconst animation = Transition(document.getElementById('my-elem'), 100);\n```\n\n2. Use the addKeyframe method to add keyframes. It takes a property definition object, which defines how a css property is transitioned as well as a relative starting and end point.\n\nYou can use one (or more) of the predefined property defintion creation functions:\n\n```javascript\nanimation\n\t.addKeyframe([rotate(30), translateX(100)], 0, 0.7)\n\t.addKeyframe([scale(1.2)], 0.3, 1);\n```\n\nOr define custom property definitions:\n\n```javascript\nanimation.addKeyframe(\n\t[\n\t\t// property defintion\n\t\t{\n\t\t\tpropertyName: 'background-color',\n\t\t\tcomputedValue: (newValue) =\u003e `rgb(${newValue}, 150, 150)`,\n\t\t\tsourceValue: 0,\n\t\t\ttargetValue: 255,\n\t\t},\n\t],\n\t// relative starting/end point (between 0 and 1)\n\t0,\n\t0.7\n);\n```\n\n3. Now you can\n\nRender the next / previous frame:\n\n```js\nanimation.next();\nanimation.previous();\n```\n\nOr set the progress manually:\n\n```js\nanimation.set(100);\n```\n\n### Docs:\n\n```ts\n/**\n * Creates a transitional object\n * @param element\n * @param duration duration in frames\n */\nfunction Transition(\n\t// can be an HTMLElement, array of HTMLElements or a css selector\n\t// see: https://github.com/CompactJS/uea#doc\n\tselector: UniversalElementSelector,\n\tduration: number\n): TransitionAPI;\n\ninterface TransitionAPI {\n\t/**\n\t *\tAdd transition keyframe with CSS properties\n\t * @param cssProperties Definitions for transitioning CSS properties\n\t * @param start keyframe starting point in percent (beween 0 and 1)\n\t * @param end keyframe end point in percent (beween 0 and 1)\n\t * @returns TransitionAPI for chaining\n\t */\n\taddKeyframe(\n\t\tcssProperties: PropertyDefinition[],\n\t\tstart: number,\n\t\tend: number\n\t): TransitionAPI;\n\t/**\n\t * draw next frame\n\t */\n\tnext(): void;\n\t/**\n\t * draw previous frame\n\t */\n\tprevious(): void;\n\t/**\n\t * draw specific frame\n\t * @param frame frame number\n\t */\n\tset(frame: number): void;\n}\n\n/**\n * Defines how a CSS property is transitioned\n */\nexport type PropertyDefinition = {\n\t/**\n\t * css property name\n\t * @example opacity\n\t */\n\tpropertyName: keyof PropertiesHyphen\u003cstring\u003e; // css properties, provided by csstype\n\t/**\n\t * defines how a css property value is generated\n\t */\n\tcomputedValue: (newValue: number) =\u003e string;\n\t/**\n\t * starting css value\n\t */\n\tsourceValue: number;\n\t/**\n\t * target css value\n\t */\n\ttargetValue: number;\n};\n\n// TransitionDefinition templates\nfunction rotate(from: number, to?: number): PropertyDefinition;\nfunction scale(from: number, to?: number): PropertyDefinition;\nfunction translateX(from: number, to?: number): PropertyDefinition;\nfunction translateY(from: number, to?: number): PropertyDefinition;\n```\n\n## Run tests\n\n```sh\nnpm run test\n```\n\n## Contact\n\n👤 **Timo Bechtel**\n\n- Website: https://timobechtel.com\n- Twitter: [@TimoBechtel](https://twitter.com/TimoBechtel)\n- GitHub: [@TimoBechtel](https://github.com/TimoBechtel)\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003e\n\n1. Check [issues](https://github.com/TimoBechtel/transition-magic/issues)\n1. Fork the Project\n1. Create your Feature Branch (`git checkout -b feat/AmazingFeature`)\n1. Test your changes `npm run test`\n1. Commit your Changes (`git commit -m 'feat: add amazingFeature'`)\n1. Push to the Branch (`git push origin feat/AmazingFeature`)\n1. Open a Pull Request\n\n### Commit messages\n\nThis project uses semantic-release for automated release versions. So commits in this project follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.2/) guidelines. I recommend using [commitizen](https://github.com/commitizen/cz-cli) for automated commit messages.\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n## 📝 License\n\nDistributed under the [MIT](https://github.com/TimoBechtel/transition-magic/blob/main/LICENSE) License.\n\n---\n\n_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimobechtel%2Ftransition-magic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimobechtel%2Ftransition-magic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimobechtel%2Ftransition-magic/lists"}