{"id":14971094,"url":"https://github.com/adasha/frame-seq","last_synced_at":"2026-02-10T11:31:10.222Z","repository":{"id":41804705,"uuid":"142862123","full_name":"Adasha/frame-seq","owner":"Adasha","description":"Custom HTML element to animate nested images. Early alpha.","archived":false,"fork":false,"pushed_at":"2023-02-22T19:10:15.000Z","size":296,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-23T04:28:37.280Z","etag":null,"topics":["animate","animation","custom-elements","frames","gif-animation","html","images","nesting","playback","video"],"latest_commit_sha":null,"homepage":"http://lab.adasha.com/components/frame-seq","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/Adasha.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-30T10:41:34.000Z","updated_at":"2022-04-28T18:20:33.000Z","dependencies_parsed_at":"2024-09-03T09:50:53.665Z","dependency_job_id":"9ee44286-207e-4f6c-b253-43450b2308ed","html_url":"https://github.com/Adasha/frame-seq","commit_stats":{"total_commits":31,"total_committers":3,"mean_commits":"10.333333333333334","dds":0.09677419354838712,"last_synced_commit":"25fa06b1a395cef4f8ee6760362cb11d659006c4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adasha%2Fframe-seq","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adasha%2Fframe-seq/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adasha%2Fframe-seq/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adasha%2Fframe-seq/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Adasha","download_url":"https://codeload.github.com/Adasha/frame-seq/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240271519,"owners_count":19774859,"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":["animate","animation","custom-elements","frames","gif-animation","html","images","nesting","playback","video"],"created_at":"2024-09-24T13:44:42.501Z","updated_at":"2026-02-10T11:31:10.180Z","avatar_url":"https://github.com/Adasha.png","language":"JavaScript","readme":"# frame-seq\nCustom HTML element to animate nested images.\n\nEarly alpha. Preloading not implemented yet so it will stutter through first playthrough.\n\nNot a lot of demo stuff yet, but there is my [basic test suite](http://lab.adasha.com/frame-seq).\n\n\n## Features\n\n### Current\n* playback of any nested elements in sequence\n* playback direction control\n* autoplay\n* looping\n* fps control\n* simple events\n\n### TBD before v1:\n- pingpong playback\n- buffering\n- preloading\n- folder-based image sequences\n- size mismatch management\n- finer-grained events\n\n\n### Post v1\n- Onion skinning\n\n\n\n\n## Usage\n\nTo use, embed JS file in `dist` and add the `\u003cframe-seq\u003e` element to your HTML. Any elements nested inside will be played back in order of the HTML.\n\n\n```HTML\n\u003cframe-seq\u003e\n    \u003cimg src=\"imgseq01.jpg\" ... \u003e\n    \u003cimg src=\"imgseq02.jpg\" ... \u003e\n    \u003cimg src=\"imgseq03.jpg\" ... \u003e\n    \u003cimg src=\"imgseq04.jpg\" ... \u003e\n    \u003cimg src=\"imgseq05.jpg\" ... \u003e\n    \u003cimg src=\"imgseq06.jpg\" ... \u003e\n    \u003cimg src=\"imgseq07.jpg\" ... \u003e\n    \u003cimg src=\"imgseq08.jpg\" ... \u003e\n    \u003cimg src=\"imgseq09.jpg\" ... \u003e\n    \u003cimg src=\"imgseq10.jpg\" ... \u003e\n\u003c/frame-seq\u003e\n```\n\n\n\n### Attributes\n\n- `fps` - Playback speed (frames-per-second). Default 12.\n- `autoplay` - Boolean: Begin playback as soon as element is rendered.\n- `reverse` - Boolean: Playback is in opposite direction.\n- `pingpong` - Boolean: Doesn't do anything yet.\n- `loop` - Boolean: Playback automatically loops (regardless of direction).\n- `width` - Doesn't do anything yet.\n- `height` - Doesn't do anything yet.\n- `preload` - Boolean: Doesn't do anything yet.\n\n\n\n### Properties\n\nAll attributes are also expressed as properties. Additional properties are:\n\n- `currentFrame` - The current playhead position (starting at 1).\n- `totalFrames` - The total number of frames in the animation (read-only).\n- `duration` - The total running time of the animation, based on the current FPS (read-only).\n- `playing` - Boolean: Whether the animation is currently playing (read-only).\n- `paused` - Boolean: Whether the animation is currently paused (read-only).\n- `stopped` - Boolean: Whether the animation is currently stopped (read-only).\n\n\n\n### Methods\n\nThese methods will almost certainly be thinned out in a future version.\n\n- `play()`\n- `pause()`\n- `resume()`\n- `stop()`\n- `gotoAndPlay(frame)`\n- `gotoAndResume(frame)`\n- `nextFrame()`\n- `prevFrame()`\n\n\n\n### Events\n\n- `stateChanged` - When the playback state has changed or any attribute is modified.\n- `enterFrame` - At the beginning of each redraw.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadasha%2Fframe-seq","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadasha%2Fframe-seq","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadasha%2Fframe-seq/lists"}