{"id":3921,"date":"2023-11-10T21:10:56","date_gmt":"2023-11-10T21:10:56","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=3921"},"modified":"2024-01-10T10:46:46","modified_gmt":"2024-01-10T10:46:46","slug":"webanimation","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/","title":{"rendered":"webAnimation"},"content":{"rendered":"\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\">4D media<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/a2z\/\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"371\" data-attachment-id=\"150\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/cody_am_alpha\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png\" data-orig-size=\"371,371\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"cody_am_alpha\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png\" alt=\"\" class=\"wp-image-150\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha.png 371w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/cody_am_alpha-100x100.png 100w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/a2z\/\">2 | a2z<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/14\/Animated_PNG_example_bouncing_beach_ball.png\" alt=\"\" style=\"width:120px\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>webAnimation<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f11fe2b387c\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f11fe2b387c\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Creating_web-ready_animation_files\" >Creating web-ready animation files<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Comparison_of_file_types\" >Comparison of file types<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Simple_GIFs\" >Simple GIFs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Creating_frames\" >Creating frames<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Making_animated_GIFs_at_Ezgif\" >Making animated GIFs at Ezgif<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#YOUR_TURN_Ezgif\" >YOUR TURN: Ezgif<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Animated_GIFs_in_Photoshop\" >Animated GIFs in Photoshop<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#YOUR_TURN_Photoshop\" >YOUR TURN: Photoshop<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Animated_GIF_with_transparency\" >Animated GIF with transparency<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#YOUR_TURN_Photoshop-2\" >YOUR TURN: Photoshop<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#New_kids_on_the_transparency_block\" >New kids on the transparency block<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#APNG\" >APNG<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Creating_with_Ezgif\" >Creating with Ezgif<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Creating_with_Photoshop\" >Creating with Photoshop<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#YOUR_TURN_APNG\" >YOUR  TURN: APNG<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#WEBP\" >WEBP<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Creating_with_Ezgif-2\" >Creating with Ezgif<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Creating_with_Photoshop-2\" >Creating with Photoshop<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#YOUR_TURN_WEBP\" >YOUR  TURN: WEBP<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#AVIF\" >AVIF<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Creating_with_Ezgif-3\" >Creating with Ezgif<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Creating_with_Photoshop-3\" >Creating with Photoshop<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#YOUR_TURN_AVIF\" >YOUR  TURN: AVIF<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#Animated_SVG\" >Animated SVG<\/a><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"has-text-align-center\"><strong>Download sample files:<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/muybridge_boy.zip\"><strong>GIF: Muybridge<\/strong><\/a><\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/cath_wheel_300.zip\"><strong>GIF + transparency: Catherine Wheel<\/strong><\/a><\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.zip\"><strong>APNG, WEBP, AVIF + transparency : Bouncing Ball<\/strong><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_web-ready_animation_files\"><\/span>Creating web-ready animation files<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>This set of simple exercises focuses on the creation of animated graphic file types. GIF files are the most common of these to find on the Web because they are among the oldest file types developed for web content. However, there are many liabilities in this file type.<\/p>\n\n\n\n<p>Many alternatives have been developed to address the issues that GIF files create. When we animate PNG files, we know them as APNGs, which are much higher quality. WEBP animations have better compression, but the relatively new AVIF is better still. And, for scalability, nothing beats an animated SVG \u2014 though it&#8217;s a special case, as we&#8217;ll see.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background:linear-gradient(180deg,rgb(255,255,255) 4%,rgb(254,205,165) 27%,rgb(254,45,45) 50%,rgb(107,0,62) 76%,rgb(12,0,0) 100%);flex-basis:100%\">\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/14\/Animated_PNG_example_bouncing_beach_ball.png\" alt=\"\" style=\"width:120px\"\/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/14\/Animated_PNG_example_bouncing_beach_ball.png\" alt=\"\" style=\"width:120px\"\/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/14\/Animated_PNG_example_bouncing_beach_ball.png\" alt=\"\" style=\"width:120px\"\/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/14\/Animated_PNG_example_bouncing_beach_ball.png\" alt=\"\" style=\"width:120px\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Comparison_of_file_types\"><\/span>Comparison of file types<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Which is the best file type to use? The answer is that there is no &#8220;best.&#8221; How you choose depends on a variety of factors. Do you need color depth? Is performance on mobile browsers critical? Does the image contain variable opacity (that is, semi-transparent elements, like the reflection in our bouncing ball above)? Must the file render in all browsers? How you answer those questions will determine the &#8220;best&#8221; file choice.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<div style=\"width: 100%; height: 260px; overflow: hidden; border-width: 0px; margin: auto; text-align: center;\">\n<iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vQ45nXU7maGbRf-mtxzWQR7zy7nIyL2XmN-NyDWrwzzvATTrXHqpPXR3g7tjg_8q8nwjgMk8GoaJZ_L\/pubhtml?widget=true&amp;headers=false&amp;gid=0&amp;chrome=false&amp;range=A1:GG8\" width=\"100%\" height=\"400px\" frameborder=\"0\" scrolling=\"yes\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<p class=\"has-text-align-center has-small-font-size\"><em>&lt;&lt;  Scroll table on mobile &gt;&gt;<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Ironically, due to the history of file type development, the file types that do the worst in most categories are the files that have the most support on the web! Watch this space, however: the newer generation of file types was only developed after the rise of the mobile device. File types like WEBP and AVIF hit the sweet spot of combining high quality with high compression. It&#8217;s only a matter of time before they replace older file types like the GIF. Having said that, the GIF is still wildly popular \u2014 and predictions of its imminent demise have persistently proven to be incorrect!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Simple_GIFs\"><\/span>Simple GIFs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Animated GIF creation is much simpler than people assume. The hardest part is in the individual frame creation, not the actual GIF creation. After discussing frame-making, we&#8217;ll introduce two paths to making a simple animated GIF.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_frames\"><\/span>Creating frames<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>We create individual frames for an animated file in an image editing program like Photoshop. In their web installation <strong>d1ASp0RA<\/strong>, TangenT ArT CollaboraTive combined a GIF created from single stop-frames by Eadweard Muybridge&#8217;s <strong>Animal Locomotion<\/strong> series with a client-controlled erasure element and animated text for a haunting exploration of the immigration experience.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/williamcromar.com\/diaspora\/dd1asp0ra04.html\" style=\"color:#4188d1;background-color:#dddddd\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>d1ASp0RA ><\/em><\/strong><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"405\" height=\"405\" data-attachment-id=\"4337\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/muybridge_boy\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/muybridge_boy.gif\" data-orig-size=\"405,405\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"muybridge_boy\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/muybridge_boy.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/muybridge_boy.gif\" alt=\"\" class=\"wp-image-4337\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>TangenT ArT Collaborative, animated GIF element from <strong>d1ASp0RA: 1d10l0GY<\/strong>, 2016<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" data-attachment-id=\"4338\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/animal-locomotion-human-boy-muybridge\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Animal-Locomotion-Human-boy-Muybridge.jpg\" data-orig-size=\"1600,956\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;Vintage Printable&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????&quot;,&quot;created_timestamp&quot;:&quot;1341014400&quot;,&quot;copyright&quot;:&quot;Scan of 2 d images in the public domain believed be free to use without restriction in the U.S.&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Animal-Locomotion-Human-boy-Muybridge\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????&lt;\/p&gt;\n\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Animal-Locomotion-Human-boy-Muybridge-1024x612.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Animal-Locomotion-Human-boy-Muybridge-1024x612.jpg\" alt=\"\" class=\"wp-image-4338\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Animal-Locomotion-Human-boy-Muybridge-1024x612.jpg 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Animal-Locomotion-Human-boy-Muybridge-300x179.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Animal-Locomotion-Human-boy-Muybridge-768x459.jpg 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Animal-Locomotion-Human-boy-Muybridge-1536x918.jpg 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/Animal-Locomotion-Human-boy-Muybridge.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Eadweard Muybridge, <strong>Human Boy from Animal Locomotion<\/strong>, ca. 1887. From Wikimedia Commons<\/em>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>While no two frame-creation jobs seem to be alike, the frames for this GIF are fairly representative of the workflow for frame-creation from existing photographic sources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The frames were created by taking apart a large JPG file with 12 frames of motion.<\/li>\n\n\n\n<li>Each frame was carefully cropped to fit inside the format and size required by the website.<\/li>\n\n\n\n<li>To achieve smoother motion, each frame was aligned using clues from the background.<\/li>\n\n\n\n<li>Pixel material was added to the top of each frame by cloning the dark background.<\/li>\n\n\n\n<li>The sepia tone was desaturated to pure grayscale.<\/li>\n\n\n\n<li>Exposure was &#8220;averaged&#8221; to avoid flash-framing, although some of the differences, in contrast, were kept to maintain a sense of &#8220;antique&#8221; imagery in the final GIF.<\/li>\n<\/ul>\n\n\n\n<p>The work done on the frames, each saved as a JPG, is available for download and inspection in the sample file link at the top of this wiki title.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Making_animated_GIFs_at_Ezgif\"><\/span>Making animated GIFs at Ezgif<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Ezgif.com<\/strong> sponsors a super-simple GIF maker and conversion toolkit is this author&#8217;s favorite place on the web (besides newMediaWiki, of course!). Among other things, you can quickly and easily:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create new gifs from frames at&nbsp;<strong><a href=\"https:\/\/ezgif.com\/maker\" target=\"_blank\" rel=\"noreferrer noopener\">GIF Maker<\/a><\/strong><\/li>\n\n\n\n<li>Convert a short video at&nbsp;<strong><a href=\"https:\/\/ezgif.com\/video-to-gif\" target=\"_blank\" rel=\"noreferrer noopener\">Video to GIF<\/a><\/strong><\/li>\n\n\n\n<li>Wrong size? Use&nbsp;<strong><a href=\"https:\/\/ezgif.com\/resize\" target=\"_blank\" rel=\"noreferrer noopener\">GIF Resizer<\/a><\/strong><\/li>\n\n\n\n<li>Compress using&nbsp;<strong><a href=\"https:\/\/ezgif.com\/optimize\" target=\"_blank\" rel=\"noreferrer noopener\">Optimizer<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Ezgif <\/strong>is so simple to use we don&#8217;t even need to write a tutorial. Just download the .zip file with frames, head to <strong>GIF Maker<\/strong>, and follow the instructions on the page. You&#8217;ll be shocked how easily you can make a GIF, once you have a decent set of frame images to upload.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/ezgif.com\/maker\" style=\"color:#4188d1;background-color:#dddddd\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em><em><strong>Visit GIF Maker at Ezgif &gt;<\/strong><\/em><\/em><\/strong><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"YOUR_TURN_Ezgif\"><\/span>YOUR TURN: Ezgif<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Use&nbsp;<strong>Ezgif<\/strong>&nbsp;to make your own Muybridge GIF from the download sample.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Animated_GIFs_in_Photoshop\"><\/span>Animated GIFs in Photoshop<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Sometimes you need more control than a browser app can provide. Photoshop is a robust GIF creation and editing tool. Here we see an interesting variation on GIF creation known as a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Cinemagraph\" target=\"_blank\" rel=\"noreferrer noopener\">cinemagraph<\/a>, in which only a portion of the image is in motion.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"539\" data-attachment-id=\"4347\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/tidewater\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/tidewater.gif\" data-orig-size=\"800,539\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"tidewater\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/tidewater.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/tidewater.gif\" alt=\"\" class=\"wp-image-4347\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"YOUR_TURN_Photoshop\"><\/span>YOUR TURN: Photoshop<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The adjacent&nbsp;link leads to a well-written tutorial at Adobe for GIF creation from a set of still images or a short video. Use the sample frames at the Adobe tutorial website to create a GIF in Photoshop.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/creativecloud.adobe.com\/cc\/learn\/photoshop\/web\/make-animated-gif\" style=\"color:#4188d1;background-color:#dddddd\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>Visit Create Animated GIFs <\/em><\/strong><br><strong><em>at Adobe ><\/em><\/strong><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Animated_GIF_with_transparency\"><\/span>Animated GIF with transparency<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>GIF supports an <a href=\"https:\/\/en.wikipedia.org\/wiki\/Alpha_compositing\" target=\"_blank\" rel=\"noreferrer noopener\">alpha channel<\/a>, so we can use it if we want to create animated elements with transparency. TangenT ArT CollaboraTive used this to interesting effect in the web installation <strong>*\/rEDaCT\/*<\/strong>, which you can visit at the adjacent link. Multiple transparent GIFS are animated using HTML5\/CSS animation techniques in a multimedia environment. Refresh the website&#8217;s screen, and you&#8217;ll see a rotating Catherine Wheel animation juxtaposed against other animations using a JS-based randomizing script in the website.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/williamcromar.com\/red-act\/d\/catherine_wheel.html\" style=\"color:#4188d1;background-color:#dddddd\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em><strong><em>*\/rEDaCT\/* ><\/em><\/strong><\/em><\/strong><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" data-attachment-id=\"4352\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/catherine_wheel_300\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/catherine_wheel_300.gif\" data-orig-size=\"300,300\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"catherine_wheel_300\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/catherine_wheel_300.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/catherine_wheel_300.gif\" alt=\"\" class=\"wp-image-4352\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>TangenT ArT CollaboraTive, <strong>Catherine<br>Wheel<\/strong>, animated GIF element from <strong>*\/rEDaCT\/*<\/strong>, 2015<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"304\" height=\"297\" data-attachment-id=\"4353\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/catherine20wheel1\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/catherine20wheel1.jpg\" data-orig-size=\"304,297\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"catherine20wheel1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/catherine20wheel1.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/catherine20wheel1.jpg\" alt=\"\" class=\"wp-image-4353\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/catherine20wheel1.jpg 304w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/catherine20wheel1-300x293.jpg 300w\" sizes=\"auto, (max-width: 304px) 100vw, 304px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>The original image found at&nbsp;<br><a href=\"https:\/\/sites.google.com\/site\/stcatherinesmonastery\/servingchristianity\" target=\"_blank\" rel=\"noreferrer noopener\">St. Catherine&#8217;s Monastery site<\/a><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>As we can see, the creation of a transparent GIF is no different than a &#8220;normal&#8221; one, save that the frames have transparent elements. Above, you can see the original file from which the animation was generated. After deleting the background, we generated frames using a Photoshop <strong>Transform Rotate<\/strong> by 3 degrees per frame, for a total of 120 frames for one full rotation.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"YOUR_TURN_Photoshop-2\"><\/span><a><\/a>YOUR TURN: Photoshop<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Find and download the Catherine Wheel sample file at the top of this wiki title. Then, use the&nbsp;sample frames to create a transparent looping GIF in Photoshop.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"New_kids_on_the_transparency_block\"><\/span>New kids on the transparency block<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The new kids on the block are animated PNG, or APNG,  along with WEBP and AVIF. Despite their clear advantages of quality and compression, browsers have been a bit slow in adopting them. Until as late as 2017, many major browsers did not support APNG. WEBP animation only achieved wider support in 2020 \u2014 and even then, Safari support was dependent on the MacOS it was running on. AVIF animation is now running on most major browsers as of this writing (2023), but Edge is still lagging. As more browsers align with these high-quality high-compression file types, we anticipate a rapid increase in their proliferation.<\/p>\n\n\n\n<p>All three animated file types work similarly to GIFs while supporting sophisticated variable transparency not available in GIFs. Now, compare the appearance of our bouncing ball APNG across a range of background values to that of a similar GIF file. Compared to the unsightly edge on the GIF, you can immediately see the advantage in the anti-aliased transparent edges and the transparency in the reflection.<\/p>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/14\/Animated_PNG_example_bouncing_beach_ball.png\" alt=\"\" style=\"width:120px\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#787878\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/14\/Animated_PNG_example_bouncing_beach_ball.png\" alt=\"\" style=\"width:120px\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-black-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/14\/Animated_PNG_example_bouncing_beach_ball.png\" alt=\"\" style=\"width:120px\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" data-attachment-id=\"4361\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/bouncing_ball\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.gif\" data-orig-size=\"200,200\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bouncing_ball\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.gif\" alt=\"\" class=\"wp-image-4361\" style=\"width:70px\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#787878\">\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" data-attachment-id=\"4361\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/bouncing_ball\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.gif\" data-orig-size=\"200,200\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bouncing_ball\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.gif\" alt=\"\" class=\"wp-image-4361\" style=\"width:70px\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-black-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" data-attachment-id=\"4361\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/bouncing_ball\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.gif\" data-orig-size=\"200,200\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bouncing_ball\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/bouncing_ball.gif\" alt=\"\" class=\"wp-image-4361\" style=\"width:70px\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<p>For each of the filetypes below, we&#8217;ll use the same set of frames found in the Bouncing Ball sample file, which you can download from the link at the top of this wiki title.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"APNG\"><\/span>APNG<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_with_Ezgif\"><\/span>Creating with Ezgif<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>There are two ways to make an APNG file with&nbsp;<strong>Ezgif<\/strong>:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Convert an existing GIF at&nbsp;<strong><a href=\"https:\/\/ezgif.com\/gif-to-apng\" target=\"_blank\" rel=\"noreferrer noopener\">GIF to APNG<\/a><\/strong>&nbsp;<\/li>\n\n\n\n<li>Create APNG using frames at&nbsp;<strong><a href=\"https:\/\/ezgif.com\/apng-maker\" target=\"_blank\" rel=\"noreferrer noopener\">APNG Maker<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>NOTE:<\/strong> It can&#8217;t be stressed enough that converting an existing GIF with transparency will NOT clean up the edges or provide variable opacity! You should only use the <strong>GIF to APNG<\/strong> to make APNGs without transparency.<\/p>\n\n\n\n<p>However, if you make your PNG frames from scratch in Photoshop, with transparency-anti-aliasing at edges and variable opacity in drop shadows, reflections, and similar effects, <strong>Ezgif<\/strong> makes remarkable files with <strong>APNG Maker<\/strong>. Use the Bouncing Ball frames in the download above to practice.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_with_Photoshop\"><\/span>Creating with Photoshop<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Historically, Photoshop has had some bugs in its output to APNG, but the latest update seems to have solved this. So, with that history in mind,  let&#8217;s have a go at creating an APNG!<\/p>\n\n\n\n<p>Theoretically, here is the workflow:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>File &gt; Export &gt; Render Video.<\/strong><\/li>\n\n\n\n<li>On the dropdown menu change from <strong>Adobe Media Encoder<\/strong> to<strong> Photoshop Image Sequence<\/strong>.<\/li>\n\n\n\n<li>Click on the dropdown list for <strong>Format<\/strong> and change it to <strong>PNG<\/strong>.<\/li>\n\n\n\n<li>Add a name for the file and location, then select <strong>Render<\/strong> to save it there.<\/li>\n<\/ul>\n\n\n\n<p>We continue to monitor potential issues with Photoshop here. If you encounter issues with rendering despite assurances from Adobe that they&#8217;ve solved the problem, a reasonable workaround is to generate good-quality PNG frames and take them to&nbsp;<strong>Ezgif<\/strong> for the <strong>APNG Maker<\/strong> above.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"YOUR_TURN_APNG\"><\/span>YOUR  TURN: APNG<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Use the&nbsp;<strong>bouncing ball<\/strong>&nbsp;sample frames to create an APNG in <strong>Ezgif<\/strong> and <strong>Photoshop<\/strong> (if it will allow!). Name them <strong>ballbounce_ezgif.png<\/strong> and <strong>ballbounce_ps.png<\/strong> to distinguish them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WEBP\"><\/span>WEBP<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_with_Ezgif-2\"><\/span>Creating with Ezgif<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>There are two ways to make a WEBP file with&nbsp;<strong><strong>Ezgif<\/strong><\/strong>:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Convert an existing GIF at&nbsp;<strong><a href=\"https:\/\/ezgif.com\/gif-to-webp\" target=\"_blank\" rel=\"noreferrer noopener\">GIF to WebP<\/a><\/strong>&nbsp;<\/li>\n\n\n\n<li>Create WEBP using frames at&nbsp;<strong><a href=\"https:\/\/ezgif.com\/webp-maker\" target=\"_blank\" rel=\"noreferrer noopener\">WebP Maker<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p>Just as we warned with APNG files, we don&#8217;t recommend trying to convert transparency WEBP files with transparency GIF files. Better to use PNG, WEBP, or AVIF files built from scratch, like our bouncing ball frames.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_with_Photoshop-2\"><\/span>Creating with Photoshop<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p><a href=\"https:\/\/helpx.adobe.com\/photoshop\/kb\/support-webp-image-format.html\" target=\"_blank\" rel=\"noreferrer noopener\">Photoshop 23.2<\/a> and later supports WEBP. However, you may need a plug-in to create animated WEBP files. If that&#8217;s true, we don&#8217;t want you to mess with your Photoshop configuration.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"YOUR_TURN_WEBP\"><\/span>YOUR  TURN: WEBP<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Use the&nbsp;<strong>bouncing ball<\/strong>&nbsp;sample frames to create a WEBP in <strong>Ezgif<\/strong> and <strong>Photoshop<\/strong> (if you don&#8217;t need a  plug-in!). Name them <strong>ballbounce_ezgif.webp<\/strong> and <strong>ballbounce_ps.webp<\/strong> to distinguish them if needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"AVIF\"><\/span>AVIF<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_with_Ezgif-3\"><\/span>Creating with Ezgif<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>There are two ways to make an AVIF file with&nbsp;<strong><strong>Ezgif<\/strong><\/strong>:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Convert an existing GIF at&nbsp;<strong><a href=\"https:\/\/ezgif.com\/gif-to-avif\" target=\"_blank\" rel=\"noreferrer noopener\">GIF to AVIF<\/a><\/strong>&nbsp;<\/li>\n\n\n\n<li>Create AVIF using frames at&nbsp;<strong><a href=\"https:\/\/ezgif.com\/avif-maker\" target=\"_blank\" rel=\"noreferrer noopener\">AVIF Maker<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p>Again, we don&#8217;t recommend trying to convert transparency AVIF files by using transparency GIF files. Use PNG, WEBP, or AVIF files like our bouncing ball frames.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_with_Photoshop-3\"><\/span>Creating with Photoshop<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Photoshop will only work with AVIF by installing a plugin, and if you&#8217;re on a networked machine in the studio I teach you don&#8217;t have administrative rights to install it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"YOUR_TURN_AVIF\"><\/span>YOUR  TURN: AVIF<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Use the&nbsp;<strong>bouncing ball<\/strong>&nbsp;sample frames to create an AVIF in <strong>Ezgif<\/strong>. Name  it <strong>ballbounce_ezgif.avif<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Animated_SVG\"><\/span>Animated SVG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To round out our knowledge of animated file types on the web, we conclude with a discussion of the animated SVG.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>SVG stands out among web animation file types for several reasons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It is vector-based and highly scalable.<\/li>\n\n\n\n<li>It is best understood as a file created in a markup language similar to HTML, and therefore: \n<ul class=\"wp-block-list\">\n<li>It can employ CSS style conventions for animation.<\/li>\n\n\n\n<li>It can be written directly inline into an HTML file, or it can be referenced as an image like other graphic file types.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background:linear-gradient(0deg,rgb(255,255,255) 51%,rgb(155,81,224) 100%);flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"8\" height=\"8\" data-attachment-id=\"4378\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/svg_animation_using_css\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/SVG_animation_using_CSS.svg\" data-orig-size=\"8,8\" data-comments-opened=\"1\" data-image-meta=\"[]\" data-image-title=\"SVG_animation_using_CSS\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/SVG_animation_using_CSS.svg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/SVG_animation_using_CSS.svg\" alt=\"\" class=\"wp-image-4378\" style=\"object-fit:contain;width:300px;height:300px\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>An SVG animation using CSS. From Wikimedia Commons<\/em>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>So, for now, if you haven&#8217;t yet learned how to work with HTML and CSS, creating an animated SVG goes beyond the scope of this wiki title. But fear not: we will cover the creation of animated SVGs in another project!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media 2 | a2z webAnimation Download sample files: GIF: Muybridge GIF + transparency: Catherine Wheel APNG, WEBP, AVIF + transparency : Bouncing Ball Creating web-ready animation files This set of simple exercises focuses on the creation of animated graphic file types. GIF files are the most common of these to find on the Web&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,11],"tags":[],"class_list":["post-3921","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-exercises"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>webAnimation - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Web Animation: Learn how to create GIF, APNG, WEBP, and AVIF files using browser apps or software. Animated SVGs are also discussed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"webAnimation - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Web Animation: Learn how to create GIF, APNG, WEBP, and AVIF files using browser apps or software. Animated SVGs are also discussed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-10T21:10:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T10:46:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" \/>\n<meta name=\"author\" content=\"williamCromar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"williamCromar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"webAnimation\",\"datePublished\":\"2023-11-10T21:10:56+00:00\",\"dateModified\":\"2024-01-10T10:46:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/\"},\"wordCount\":1925,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"Exercises\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/\",\"name\":\"webAnimation - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-11-10T21:10:56+00:00\",\"dateModified\":\"2024-01-10T10:46:46+00:00\",\"description\":\"Web Animation: Learn how to create GIF, APNG, WEBP, and AVIF files using browser apps or software. Animated SVGs are also discussed.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"width\":420,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/webanimation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"webAnimation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"},\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/author\\\/williamcromar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"webAnimation - newMediaWiki","description":"Web Animation: Learn how to create GIF, APNG, WEBP, and AVIF files using browser apps or software. Animated SVGs are also discussed.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/","og_locale":"en_US","og_type":"article","og_title":"webAnimation - newMediaWiki","og_description":"Web Animation: Learn how to create GIF, APNG, WEBP, and AVIF files using browser apps or software. Animated SVGs are also discussed.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/","og_site_name":"newMediaWiki","article_published_time":"2023-11-10T21:10:56+00:00","article_modified_time":"2024-01-10T10:46:46+00:00","og_image":[{"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","type":"","width":"","height":""}],"author":"williamCromar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"williamCromar","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"webAnimation","datePublished":"2023-11-10T21:10:56+00:00","dateModified":"2024-01-10T10:46:46+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/"},"wordCount":1925,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","Exercises"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/","url":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/","name":"webAnimation - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-11-10T21:10:56+00:00","dateModified":"2024-01-10T10:46:46+00:00","description":"Web Animation: Learn how to create GIF, APNG, WEBP, and AVIF files using browser apps or software. Animated SVGs are also discussed.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/webanimation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","width":420,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/webanimation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"webAnimation"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"},"url":"https:\/\/williamcromar.com\/newmediawiki\/author\/williamcromar\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=3921"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3921\/revisions"}],"predecessor-version":[{"id":5945,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/3921\/revisions\/5945"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=3921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=3921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=3921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}