{"id":30275329,"url":"https://github.com/nikolai-cc/svanim","last_synced_at":"2026-04-11T20:45:44.081Z","repository":{"id":47125586,"uuid":"435903646","full_name":"nikolai-cc/svanim","owner":"nikolai-cc","description":"Animation utillities for svelte/motion stores.","archived":false,"fork":false,"pushed_at":"2021-12-07T14:21:14.000Z","size":12,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T07:21:27.322Z","etag":null,"topics":["animation","keyframes","staggered","svelte","sveltekit"],"latest_commit_sha":null,"homepage":"https://svanim.vercel.app","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/nikolai-cc.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":"2021-12-07T14:05:17.000Z","updated_at":"2022-07-20T08:43:50.000Z","dependencies_parsed_at":"2022-08-20T09:20:41.792Z","dependency_job_id":null,"html_url":"https://github.com/nikolai-cc/svanim","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nikolai-cc/svanim","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolai-cc%2Fsvanim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolai-cc%2Fsvanim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolai-cc%2Fsvanim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolai-cc%2Fsvanim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikolai-cc","download_url":"https://codeload.github.com/nikolai-cc/svanim/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolai-cc%2Fsvanim/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31695165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T20:18:30.949Z","status":"ssl_error","status_checked_at":"2026-04-11T20:18:29.982Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["animation","keyframes","staggered","svelte","sveltekit"],"created_at":"2025-08-16T09:21:12.829Z","updated_at":"2026-04-11T20:45:44.074Z","avatar_url":"https://github.com/nikolai-cc.png","language":"JavaScript","readme":"# Svanim\n\nAnimation utillities for svelte/motion stores.\n\n### Installation\n\n```\nnpm i svanim\n```\n\nSvelte/motion stores are powerful ways to tween values over time. This is a tiny lib that allows you to pass in an array of store transormations and play them as keyframes or staggered. It will simply loop over the array and play them using setTimeout();\n\nIt returns a `play()` function that allows you to manually (re)start the timeline and a `cancel()` function that stops the animation after the current transform is complete.\n\n## Usage\n\n#### Keyframes:\n\n```html\n\u003cscript\u003e\n  import { keyframe } from 'svanim'\n  import { tweened } from 'svelte/motion'\n\n  let width = tweened(100)\n\n  let frames = [{\n      { s: width, to: 100, time: 0 }\n      { s: width, to: 1000, time: 1000 }\n      { s: width, to: 500, time: 3000 }\n  }]\n\n  let tl = timeline(frames, { autoplay: false, direction: 'alternate', loop: true });\n\u003c/script\u003e\n\n\u003cdiv style=\"width: {$width}px\"\u003eI will be changing my width.\u003c/div\u003e\n\n\u003cbutton on:click=\"{\" tl.play }\u003eStart looping through the keyframes\u003c/button\u003e\n```\n\n#### Staggered:\n\n```html\n\u003cscript\u003e\n  import { stagger } from 'svanim'\n  import { tweened } from 'svelte/motion'\n\n  let one = tweened(100)\n  let two = tweened(100)\n  let three = tweened(100)\n\n  let frames = [{\n      { s: one, to: 500 }\n      { s: two, to: 500 }\n      { s: three, to: 500 }\n  }]\n\n  let st = stagger(frames, { autoplay: false, delay: 250 })\n\u003c/script\u003e\n\n\u003cdiv style=\"width: {$one}px\"\u003eI am first\u003c/div\u003e\n\n\u003cdiv style=\"width: {$two}px\"\u003eI am second\u003c/div\u003e\n\n\u003cdiv style=\"width: {$three}px\"\u003eI am third\u003c/div\u003e\n\n\u003cbutton on:click=\"{\" st.play }\u003eStart staggered animation\u003c/button\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikolai-cc%2Fsvanim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikolai-cc%2Fsvanim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikolai-cc%2Fsvanim/lists"}