{"id":16760356,"url":"https://github.com/ryanve/draf","last_synced_at":"2025-08-08T23:26:36.412Z","repository":{"id":57215909,"uuid":"94653968","full_name":"ryanve/draf","owner":"ryanve","description":"double RAF JavaScript module","archived":false,"fork":false,"pushed_at":"2018-12-27T00:03:32.000Z","size":12,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T18:56:25.453Z","etag":null,"topics":["animation","dom","jank","javascript","performance","reactive","requestanimationframe","ui"],"latest_commit_sha":null,"homepage":"https://ryanve.github.io/draf/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-17T23:11:14.000Z","updated_at":"2024-10-24T01:24:27.000Z","dependencies_parsed_at":"2022-08-26T13:42:00.057Z","dependency_job_id":null,"html_url":"https://github.com/ryanve/draf","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fdraf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fdraf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fdraf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fdraf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanve","download_url":"https://codeload.github.com/ryanve/draf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262041,"owners_count":21074236,"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","jank","javascript","performance","reactive","requestanimationframe","ui"],"created_at":"2024-10-13T04:23:14.654Z","updated_at":"2025-04-10T17:37:12.039Z","avatar_url":"https://github.com/ryanve.png","language":"HTML","readme":"# `draf`\n### double `requestAnimationFrame` (double RAF) as an [npm package](https://www.npmjs.com/package/draf)\n\n```\nnpm install draf\n```\n\n## [use case](https://youtu.be/mmq-KVeO-uU?t=14m0s)\n\nDouble RAF is useful for ensuring that animations start before expensive rendering is done. It helps provide smoother user experience by making animations feel reactive. Normal rendering would block the animation from starting. With double RAF as shown here the rendering function safely runs in the main thread after the animation has already started.\n\n```js\nconst draf = require('draf')\nconst startAnimating = element =\u003e element.classList.add('animating')\nconst renderNextView = function() {/* ... */}\nlet button = document.createElement('button')\n\nbutton.addEventListener('click', function() {\n  startAnimating(this)\n  draf(renderNextView)\n})\n```\n\n## `draf(callback)`\n\n- returns the request ID from the first `requestAnimationFrame`\n- callback receives the `DOMHighResTimeStamp` number from the second `requestAnimationFrame`\n\n```js\ndraf(function(stamp) {\n  console.log(stamp)\n})\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Fdraf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanve%2Fdraf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Fdraf/lists"}