{"id":22296431,"url":"https://github.com/knowledgecode/velvet","last_synced_at":"2025-08-22T10:37:04.935Z","repository":{"id":57391478,"uuid":"58207475","full_name":"knowledgecode/velvet","owner":"knowledgecode","description":"A JavaScript Library for DOM Animations as smooth as Velvet","archived":false,"fork":false,"pushed_at":"2017-09-11T14:24:02.000Z","size":49,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-06T19:46:26.357Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://knowledgecode.github.io/velvet/","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/knowledgecode.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":"2016-05-06T13:00:28.000Z","updated_at":"2024-01-21T06:01:42.000Z","dependencies_parsed_at":"2022-08-25T19:50:35.775Z","dependency_job_id":null,"html_url":"https://github.com/knowledgecode/velvet","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/knowledgecode/velvet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fvelvet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fvelvet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fvelvet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fvelvet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knowledgecode","download_url":"https://codeload.github.com/knowledgecode/velvet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowledgecode%2Fvelvet/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268067936,"owners_count":24190457,"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","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-03T17:45:34.228Z","updated_at":"2025-07-31T16:07:28.281Z","avatar_url":"https://github.com/knowledgecode.png","language":"JavaScript","readme":"# Velvet\nA JavaScript library for DOM animations as smooth as Velvet, which was inspired by [Velocity](http://julian.com/research/velocity/) and [jQuery Transit](http://ricostacruz.com/jquery.transit/).\n\n## TL;DR\nSee [demo](https://knowledgecode.github.io/velvet/) page.\n\n## Features\n- **Animations with JavaScript**  \nIt's a sort of manipulator to easily manipulate an element's transform property with JavaScript. You can freely **_play_**, **_pause_** and **_reverse_** the animation.\n\n- **Web Animations API**  \nIt preferentially uses [Web Animations API](https://w3c.github.io/web-animations/), specifically `element.animate()` if supported.\n\n## Policy\n- **Speedster**  \nIt pursues speed than *Swiss Army knife*.\n\n- **Minimalist**  \nIt keeps it as simple and small as possible (3.3kb (minified and gzipped) for now).\n\n## Installation\n*npm:*\n```shell\n$ npm install velvetjs\n```\n\n*Bower(Deprecated):*\n```shell\n$ bower install velvetjs\n```\n\n## Usage\n*CommonJS:*\n```javascript\nvar velvet = require('velvetjs');\nvar div = velvet(document.getElementById('div'));\ndiv.weave({ translateX: 100 }, { durarion: 400 });\n```\n\n*AMD:*\n```javascript\nrequire(['path/to/velvet'], function (velvet) {\n    var div = velvet(document.getElementById('div'));\n    div.weave({ translateX: 100 }, { durarion: 400 });\n});\n```\n\n*directly:*\n```html\n\u003cscript src=\"/path/to/velvet.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    var div = velvet(document.getElementById('div'));\n    div.weave({ translateX: 100 }, { durarion: 400 });\n\u003c/script\u003e\n```\n\n## API\n### *velvet([element])*\n- **element**: One or more target elements. (optional)\n\nThe `velvet` function returns a `Velvet` object or a `Textile` object. If call this with a parameter, it returns a `Velvet` object. If omit the parameter, it returns a `Textile` object.  \n```javascript\nvar v = velvet(document.getElementById(('div'));    // Returns a Velvet object\nvar t = velvet();   // Returns a Textile object\n```\n\n### Velvet object\n#### *v.weave(styles, options)*\n- **styles**: CSS Styles (transforms and opacity only)  \n- **options**: Animation options\n\nThe `weave` method creates an animation. The details of arguments are as follows:\n```javascript\nvar w = v.weave({\n    translateX: 100,    // (px)\n    translateY: 200,    // (px)\n    translateZ: 300,    // (px) Not supported in IE9\n    scale: 1.5,     // Equivalent to { scaleX: 1.5, scaleY: 1.5 }\n    scaleX: 2,\n    scaleY: 2,\n    scaleZ: 2,      // Not supported in IE9\n    rotate: 30,     // (deg) Equivalent to { rotateZ: 30 }\n    rotateX: 45,    // (deg) Not supported in IE9\n    rotateY: 60,    // (deg) Not supported in IE9\n    rotateZ: 30,    // (deg) Not supported in IE9\n    skewX: 45,      // (deg)\n    skewY: 45,      // (deg)\n    perspective: 400,   // (px)\n    opacity: 0.5\n}, {\n    delay: 1000,    // (ms)\n    durarion: 400,  // (ms)\n    easing: 'ease', // Any of 'linear', 'ease', 'ease-in', 'ease-out' and 'ease-in-out'\n    oncancel: function () {\n        // This is called when the animation is canceled.\n    },\n    onfinish: function () {\n        // This is called when the animation is finished.\n    }\n});\n```\n**NOTE:** *Don't append unit for these parameters. 100px -\u003e 100*  \n\nThis method returns a `Weaver` object and the animation will automatically start.\n\n#### *v.style(styles)*\n- **styles**: CSS Styles\n\nThe `style` method set styles to the element. Since the above `weave` method ignores the preset `transform` and `opacity` property, you need to set the styles if want to make started the animation from status different from default (position, size, etc.).\n```javascript\n// fade-in\nv.style({\n    translateX: 100,\n    opacity: 0\n}).weave({\n    opacity: 1  // The opacity will transition from 0 to 1\n}, {\n    duration: 400\n});\n```\n\nYou may also set other properties with this method.\n```javascript\nv.style({\n    position: 'absolute',\n    left: '10px',   // In this case you need to append unit. 10 -\u003e 10px\n    top: '20px'\n});\n```\n**NOTE:** *Since this method will not take care of Vendor Prefix, for instance, you will need to set them like this:*  \n```javascript\nv.style({\n    '-webkit-transform-origin': 'left top'\n    '-moz-transform-origin': 'left top'\n    '-ms-transform-origin': 'left top'\n    'transform-origin': 'left top'\n});\n```\n\n### Textile object\n#### *t.weave(from, to, options, cb)*\n- **from**: An array of start values\n- **to**: An array of end values\n- **options**: Animation options\n- **cb**: A callback function called per frame\n\nThe `weave` method creates an animation other than `transform` and `opacity`. This is an example of scrolling a window:\n```javascript\nvar w = t.weave([0], [200], {\n    delay: 1000,    // (ms)\n    duration: 400,  // (ms)\n    easing: 'ease', // Any of 'linear', 'ease', 'ease-in', 'ease-out' and 'ease-in-out'\n    oncancel: function () {\n        // This is called when the animation is canceled.\n    },\n    onfinish: function () {\n        // This is called when the animation is finished.\n    }\n}, function (values) {\n    // The scroll position will transition from 0px to 200px.\n    window.scrollTo(0, values[0]);\n});\n```\nIt returns a `Weaver` object in the same way as `v.weave` method.\n\n### Weaver object\n#### *w.pause()*\nThe `pause` method pauses the animation.\n#### *w.play()*\nThe `play` method resumes the paused animation, or replays the stopped animation.\n#### *w.finish()*\nThe `finish` method goes to the end position of the animation, and stops.\n#### *w.cancel()*\nThe `cancel` method goes back to the start position of the animation, and stops.\n#### *w.reverse()*\nThe `reverse` method reverses the current play direction, and starts to play the animation.\n```javascript\nv.weave({\n    translateX: 100\n}, {\n    durarion: 400,\n    onfinish: function () {\n        this.reverse(); // The animation will be endlessly repeated.\n    }\n});\n```\n#### *w.direction()*\nThe `direction` method returns current play direction. (1: forward direction, -1: backward direction)\n\n## Tips\n### *Position Property*\nFor better performance, set `absolute` or `fixed` to the element's `position` property.\n```CSS\n#element {\n    position: \"absolute\";\n}\n```\n### *Combo Animations with Promise*\nIn order to create Combo Animations use Promise like this:\n```javascript\nvar div = velvet(document.getElementById(('div'));\n\nPromise.resolve().then(function () {\n    return new Promise(resolve) {\n        div.weave({\n            translateX: 100     // The translateX will transition from 0 to 100.\n        }, {\n            duration: 400,\n            onfinish: resolve\n        });\n    };\n}).then(function () {\n    return new Promise(resolve) {\n        div.weave({\n            translateY: 100     // The translateY will transition from 0 to 100.\n        }, {                    // The X will remain at the same position (100px).\n            duration: 400,\n            onfinish: resolve\n        });\n    };\n}).then(function () {\n    return new Promise(resolve) {\n        div.weave({\n            translateX: 0,\n            translateY: 0       // These will transition from 100 to 0.\n        }, {\n            duration: 400,\n            onfinish: resolve\n        });\n    };\n});\n```\n\n## TODO\n- Proper test\n- ~~Multiple elements control~~\n- Customizing cubic bezier\n- Vendor Prefix support for `style` method\n- Returning a Promise\n\n## Supported browser\nChrome, Firefox, Safari, Opera, Android Browser 4.0+, iOS Safari, Edge and IE9+\n\n## Lisence\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowledgecode%2Fvelvet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknowledgecode%2Fvelvet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowledgecode%2Fvelvet/lists"}