{"id":20027104,"url":"https://github.com/unic/animated-pngs","last_synced_at":"2025-08-04T12:37:00.622Z","repository":{"id":82538159,"uuid":"379190968","full_name":"unic/animated-pngs","owner":"unic","description":"Showcases how to animate PNG frames with transparency ","archived":false,"fork":false,"pushed_at":"2021-06-22T08:24:48.000Z","size":74521,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-16T11:48:00.453Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/unic.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":"2021-06-22T08:07:39.000Z","updated_at":"2022-11-26T22:27:16.000Z","dependencies_parsed_at":"2023-11-03T08:45:09.011Z","dependency_job_id":null,"html_url":"https://github.com/unic/animated-pngs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/unic/animated-pngs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Fanimated-pngs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Fanimated-pngs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Fanimated-pngs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Fanimated-pngs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unic","download_url":"https://codeload.github.com/unic/animated-pngs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Fanimated-pngs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268696937,"owners_count":24292386,"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","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-13T09:09:03.345Z","updated_at":"2025-08-04T12:37:00.583Z","avatar_url":"https://github.com/unic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animate PNGs with Transparency\n\n## Run examples\n\n```sh\nnpm install \u0026\u0026 npm run start\n```\n\nExamples:\n\n* [Sprite animated with CSS](http://localhost:5000/sprite_css)\n* [Sprite animated with Canvas](http://localhost:5000/sprite_canvas)\n* [Animated PNG](http://localhost:5000/apng)\n* [WebM/AV1 - HEVC](http://localhost:5000/video)\n\n## Time / Frame calculation example\n\n6 seconds / 100 frames = 0.06 seconds for each frame\n\nHow many frames in one second = 1 / 0.06 = 16.666 frames\n\n## Rendering performance measure\n\n* Canvas 3x-5x faster than rendering sprite\n* APNG and Video doesn't need rendering time from the browser\n\n### Sprite CSS\n\n![Sprite CSS](measures/sprite_css.png)\n\n### Sprite Canvas\n\n![Sprite Canvas](measures/sprite_canvas.png)\n\n### APNG\n\n![APNG](measures/apng.png)\n\nSupport: https://caniuse.com/?search=apng\n\nCanvas polyfill for IE11 possible: https://github.com/davidmz/apng-canvas\n\nHow to generate the file format:\n\n* https://ezgif.com/apng-maker (Web, single frames or sprite)\n* https://sourceforge.net/projects/apngasm/files/2.91/ (CLI)\n* https://github.com/shgodoroja/APNGb (UI)\n* https://www.reto-hoehener.ch/japng/ (UI or CLI)\n* https://github.com/akalverboer/canvas2apng (Library to export canvas to APNG)\n\n### WebM/AV1 - HEVC\n\n![Video](measures/video.png)\n\nSupport: WebM (VP9) https://caniuse.com/?search=webm or AV1 https://caniuse.com/?search=av1 and HEVC as fallback for Safari \u003e= 11 \u0026 Mac OS High Sierra https://caniuse.com/?search=HEVC\n\nHow to generate the needed video files:\n\nWebM:\n\n```sh\nffmpeg -framerate 16.666 -i frames/tile%3d.png -c:v libvpx-vp9 -pix_fmt yuva420p movie.webm\n```\n\nif no audio is wished, you can also add the `-an` flag.\n\nFor generating the HEVC, we first have to create this .mov file:\n\n```sh\nffmpeg -framerate 16.666 -i frames/tile%3d.png -c:v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile:v 4444 -f mov -vframes 150 movie-original.mov\n```\n\nThen use right click on movie.mov file on MacOS \u003e= Catalina finder and choose \"Encode Selected Video Files\". A dialog should appear where you set \"HEVC 1080p\" as encoding and enable the \"Preserve Transparency\" option:\n\n![Encode Selected Video Files finder option](encode-option.png)\n\n![Encode Selected Video Files finder](encode-media.png)\n\nor you can also use the CLI:\n\n```sh\navconvert --preset PresetHEVC1920x1080WithAlpha --source movie-original.mov --output movie-hevc-encoded.mov\n```\n\n## Sumup / Notable differences\n\n* Video is by far the best considering file size, but watchout for browser support (no IE support, fallback for Safari)\n* Video export seems to change the colors of the frames (keep in mind if you want to use a poster image)\n* When switching tabs, sprite css loses some frames and the whole page flickers, doesn't happen with other solutions\n* CSS Sprite and Canvas both render when not in view (IntersectionObserver needed), APNG stops by default\n* All seem to stop rendering when tab is not visible (still focus/bluring window could be implemented when window is background)\n\n## Credits\n\nThanks [@christophdubach](https://github.com/christophdubach) and [@tobiasfrei](https://github.com/tobiasfrei) for proposing ideas and showing pitfalls.\n\n## Sources\n\n* https://kitcross.net/hevc-web-video-alpha-channel/\n* https://evilmartians.com/chronicles/better-web-video-with-av1-codec\n* https://gist.github.com/bbuyukkahraman/3ef92ae522545654d2cbc86fc50650d1\n* https://ffmpeg.org/documentation.html\n* https://trac.ffmpeg.org/wiki/Encode/AV1\n* https://trac.ffmpeg.org/wiki/Encode/H.265\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funic%2Fanimated-pngs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funic%2Fanimated-pngs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funic%2Fanimated-pngs/lists"}