{"id":13827616,"url":"https://github.com/LiikeJS/Liike","last_synced_at":"2025-07-09T04:32:56.861Z","repository":{"id":79386709,"uuid":"103452808","full_name":"LiikeJS/Liike","owner":"LiikeJS","description":"Tiny JS tweening library.","archived":false,"fork":false,"pushed_at":"2017-09-23T22:04:30.000Z","size":671,"stargazers_count":180,"open_issues_count":7,"forks_count":19,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-05-02T02:23:21.873Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://liike.js.org","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/LiikeJS.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-09-13T21:29:16.000Z","updated_at":"2024-03-24T15:43:25.000Z","dependencies_parsed_at":"2023-08-01T05:15:33.303Z","dependency_job_id":null,"html_url":"https://github.com/LiikeJS/Liike","commit_stats":{"total_commits":90,"total_committers":2,"mean_commits":45.0,"dds":"0.033333333333333326","last_synced_commit":"903304af82aa1c19286ca5d8e3e4394f96193ea5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiikeJS%2FLiike","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiikeJS%2FLiike/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiikeJS%2FLiike/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiikeJS%2FLiike/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiikeJS","download_url":"https://codeload.github.com/LiikeJS/Liike/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225486367,"owners_count":17481883,"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":[],"created_at":"2024-08-04T09:02:03.369Z","updated_at":"2024-11-20T07:30:49.289Z","avatar_url":"https://github.com/LiikeJS.png","language":"JavaScript","readme":"[![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?maxAge=60\u0026style=flat-square)](https://github.com/Flet/semistandard)\n[![npm](https://img.shields.io/npm/v/liike.svg?maxAge=60\u0026style=flat-square)](https://www.npmjs.com/package/liike)\n[![npm](https://img.shields.io/npm/l/liike.svg?maxAge=60\u0026style=flat-square)](https://github.com/liike/liike/blob/master/LICENSE)\n[![Join the chat at https://gitter.im/pakastin/liike](https://badges.gitter.im/LiikeJS/Liike.svg)](https://gitter.im/LiikeJS/Liike?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Twitter Follow](https://img.shields.io/twitter/follow/pakastin.svg?style=social\u0026maxAge=60)](https://twitter.com/pakastin)\n[![Twitter Follow](https://img.shields.io/twitter/follow/LiikeJS.svg?style=social\u0026maxAge=60)](https://twitter.com/LiikeJS)\n\n![Logo](https://liike.js.org/logo.jpg?4)\n\n# Liike\n*Liike* is a Finnish word and means *movement*, *motion*. It's a minimalistic library to create performant custom JS tweens no matter what you're tweening.\n\nWhen you create a tween, Liike will create a single render loop on-demand for every tweens running and use [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) (provided by [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)), which should be accurate to 5 µs. If the `delay` is `0`, Liike will start the tween at the next animation frame and count the duration from there.\n\n# Example\n\n\nhttps://liike.js.org\n- [Source](https://github.com/pakastin/Liike/blob/master/example/index.js)\n\n# Install\n```\nnpm i liike\n```\n- ES6 module production: https://liike.js.org/liike.es.min.js (~2.5 KB)\n- ES6 module development: https://liike.js.org/liike.es.js (~5 KB)\n- UMD production: https://liike.js.org/liike.min.js (~2.5 KB)\n- UMD development: https://liike.js.org/liike.js (~5 KB)\n\n# Usage\n```js\nimport liike from 'liike';\n\n/**\n * Define how Liike should animate based on the tweened values\n * @param {Element} The element you're tweening\n * @param {Object} Tween settings\n */\nconst transform = (target, data) =\u003e {\n  const { x = 0, y = 0, opacity = 1 } = data;\n\n  target.style.transform = `translate(${x}px, ${y}px)`;\n  target.style.opacity = opacity;\n};\n\nconst tween = liike(transform);\n\nconst $hello = document.getElementById('hello');\n\ntween($hello, {\n  delay: 0,\n  duration: 1000,\n  easing: 'bounceOut',\n  from: {\n    y: -100,\n    opacity: 0\n  },\n  to: {\n    opacity: 1\n  }\n});\n```\n\n## Tween settings\n- delay: After how many milliseconds the tween will start\n- duration: How many milliseconds the tween will last\n- easing: Check available easing functions [below](#available-easings)\n- from: Values to start from\n- to: Values to tween to\n- onstart: Callback for tween start `onstart(target)`\n- onprogress: Callback for progress `onprogress(target, t)`\n- onend: Callback for tween end `onend(target)`\n\n## Available easings\n- linear\n- quadIn, quadOut, quadInOut (power to 2)\n- cubicIn, cubicOut, cubicInOut (power to 3)\n- quartIn, quartOut, quartInOut (power to 4)\n- quintIn, quintOut, quintInOut (power to 5)\n- sineIn, sineOut, sineInOut\n- bounceIn, bounceOut, bounceInOut\n\n# Browser support\n- **IE 10** and newer (IE 9 and older will need polyfill for [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame))\n\n# License\n- [MIT](https://github.com/pakastin/Liike/blob/master/LICENSE)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLiikeJS%2FLiike","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLiikeJS%2FLiike","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLiikeJS%2FLiike/lists"}