{"id":18458055,"url":"https://github.com/baianat/leaps","last_synced_at":"2025-04-08T05:33:53.537Z","repository":{"id":42341729,"uuid":"155387854","full_name":"baianat/leaps","owner":"baianat","description":"🎥 Declarative Vue.js animations library, spring-physics based.","archived":false,"fork":false,"pushed_at":"2022-12-03T21:08:04.000Z","size":13396,"stargazers_count":56,"open_issues_count":15,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T06:51:06.027Z","etag":null,"topics":["animation","animation-component","leaps","physics","spring-physics"],"latest_commit_sha":null,"homepage":"https://baianat.github.io/leaps/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baianat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-30T13:13:35.000Z","updated_at":"2025-02-28T03:02:38.000Z","dependencies_parsed_at":"2023-01-23T23:03:19.106Z","dependency_job_id":null,"html_url":"https://github.com/baianat/leaps","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baianat%2Fleaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baianat%2Fleaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baianat%2Fleaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baianat%2Fleaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baianat","download_url":"https://codeload.github.com/baianat/leaps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247785919,"owners_count":20995641,"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","animation-component","leaps","physics","spring-physics"],"created_at":"2024-11-06T08:16:31.425Z","updated_at":"2025-04-08T05:33:48.528Z","avatar_url":"https://github.com/baianat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://baianat.github.io/leaps/\" target=\"_blank\"\u003e\n    \u003cimg width=\"500\" alt=\"leaps logo\" src=\"https://github.com/baianat/leaps/blob/master/docs/.vuepress/public/leaps.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://isitmaintained.com/project/baianat/leaps\"\u003e\u003cimg src=\"http://isitmaintained.com/badge/resolution/baianat/leaps.svg\" alt=\"Average time to resolve an issue\"/\u003e\u003c/a\u003e\n  \u003ca href=\"http://isitmaintained.com/project/baianat/leaps\"\u003e\u003cimg src=\"http://isitmaintained.com/badge/open/baianat/leaps.svg\" alt=\"Percentage of issues still open\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://npm-stat.com/charts.html?package=leaps\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/leaps.svg\" alt=\"npm\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/leaps\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/leaps.svg\" alt=\"npm\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/baianat/leaps/blob/master/demos/gifs/innet%20text.gif\"\u003e\u003cimg width=\"250px\" src=\"https://github.com/baianat/leaps/blob/master/demos/gifs/innet%20text.gif\" alt=\"Inner Text Animation\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/baianat/leaps/blob/master/demos/gifs/basic.gif\"\u003e\u003cimg width=\"320px\" src=\"https://github.com/baianat/leaps/blob/master/demos/gifs/basic.gif\" alt=\"Basic Animation\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/baianat/leaps/blob/master/demos/gifs/svh.gif\"\u003e\u003cimg width=\"250px\" src=\"https://github.com/baianat/leaps/blob/master/demos/gifs/svh.gif\" alt=\"SVG Animation\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/baianat/leaps/blob/master/demos/air-hockey.vue\"\u003e\u003cimg width=\"500px\" src=\"https://github.com/baianat/leaps/blob/master/demos/gifs/air-hockey.gif\" alt=\"Inner Text Animation\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/baianat/leaps/blob/master/demos/superheros.vue\"\u003e\u003cimg width=\"700px\" src=\"https://github.com/baianat/leaps/blob/master/demos/gifs/superheros.gif\" alt=\"Inner Text Animation\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Leaps\n\nLeaps is a set of simple, physics-based Vue.js animation components. It covers the most of your UI related animation needs where CSS just isn't enough anymore.\n\n## Shipped with\n\n* [Leaps](https://baianat.github.io/leaps/leaps.html)\n  * The primary animation component, which is a spring-physics based. Its main role is to move property from one value to another, with more natural animation and easing.\n* [Parallax](https://baianat.github.io/leaps/parallax.html)\n  * Used move property from one value to another, based on the scrolled distance.\n* [Reveal](https://baianat.github.io/leaps/Reveal.html)\n  * Used to apply CSS animation class to an element, when it enters the view-port.\n\n## Why Physics\n\nTraditional animation methods are based on duration time and ease function, while the animation goes from the start state to the end state, event if using Bézier easing can be very limiting. Due to having only two handles, you can't produce some complex physics effects. If you go beyond three sequences CSS become complex with delays and you end up having to do a lot of recalculation if you adjust the timing.\n\nHard-coded durations are opposed to continuous, fluid interactivity. If your animation is interrupted mid-way, you'd get a weird completion animation if you hard-coded the time.\nInstead of hard-coded duration, we will use a [physical model](https://en.wikipedia.org/wiki/Damping_ratio) to determine our animation duration and easing, based on the element dumping, and mass. Instead of guessing the animation parameters that fits best with your animation, there is an interactive configuration section in the documentation that will guide you.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://baianat.github.io/leaps/leaps.html#configuration\"\u003e\u003cimg width=\"600px\" src=\"https://github.com/baianat/leaps/blob/master/demos/gifs/config.gif\" alt=\"Config Animation\"/\u003e\u003c/a\u003e\n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaianat%2Fleaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaianat%2Fleaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaianat%2Fleaps/lists"}