Gif to HTML5 conversion?

[chuckeroo]

I have an animated gif file I exported from Photoshop. The client is now asking for an HTML5 file -- How can I do that from Photoshop or any other Adobe CC app? I have done many gif like this and never had this request before. I am not super proficient in XD, DreamWeaver, etc. If it is simple enough to just import and export from one fo these without a lot of tweaking I am sure I could do it. Thanks for your help and advice.

[rayek.elfin · Accepted solution]

HTML5 is generally a rather vague umbrella term used to indicate an animation (interactive or otherwise), a game, or web app running in the browser that uses a variety of web technologies, which inlcude (in this case animation):

• the use of HTML DOM elements which are moved/animated using Javascript and/or CSS animations;
• the use of SVG files with animated elements, again moved/animated using either Javascript, CSS, or both;
• the use of the CANVAS html element to draw animated objects, which relies on Javascript;
• the use of WebGL 3d to render animated 2d and/or 3d objects in the browser;
• the use of WebAssembly and WebGL to draw 2d and 3d animated elements in the browser;
• the combined use of any of the above.

Which method(s) to use depends on the type of animation, game, project, or your own preferences.

Since it is a simple animated GIF you made in Photoshop, I assume it is a simple 2d animation. And based on your post, I also assume you have little or no experience with web development or coding.

In that case options would be:

• Adobe Animate CC HTML5 export
• Soala Animate https://atomisystems.com/saola-animate/
• Tumult Hype (Mac only) https://tumult.com/hype/
• Google Web Designer https://webdesigner.withgoogle.com/

Other options would include libraries such as GSAP (which requires programming knowledge), or even HTML5 game creators like Construct 3 (which also includes an animation timeline). And there are many other developer tools and libraries available online and offline for free and money that could be used as well.

It is not possible to directly convert your existing Photoshop animation to any of these tools, though. Photoshop has no option to export to one of the earlier mentioned HTML 5 options. The best that you can achieve is to import the layered PSD (if supported by the tool) or export all your layers as separate assets, and re-do your animation in the tool of your choice.

(There might be Photoshop plugins to help you with this process as well, perhaps even direct converters. I have not Googled that, because in my experience similar plugins cost an arm and a leg, and are too limited anyway.)

[chuckeroo]

Yes, sorry, it is a simple 2D animation. I have zero experience in Adobe Animate. With a little bit of research, I have found some supposed free online gif to HTML converters, will these work? But yes, knowing exactly what the HTML requiremets are would help. I have yet to be provided that info but your repsonse will help ask at least some of the right questions.

[rayek.elfin]

No, those converters will merely encode your bitmap GIF to BASE64 code, which is a conversion from binary bitmap to an encoded text string that browsers can read. In layman terms: it converts your graphic to a text file, which can be embedded directly in the html code (instead of linking the external image).

It would be the worst conversion possible for an animated GIF, and some browsers have trouble with very large base64 encoded images. There is just no sense behind it in this case. For smaller embedded logos, perhaps. Definitely avoid here.

Chime back in here when you are provided with the client's HTML5 requirements. 

[chuckeroo]

Will do. Are you familiar with InDesign In5? Supposedly I can export to HTML out of that as well. I have never worked with In5 but I am very proficient in InDesign so it would (maybe) be less of a learning curve.

[jane-e]

Hi

I have not used In5, but Ajar Productions has a Contact Page,

https://ajarproductions.com/pages/contact.php?category=in5

and they offer a free trial with limited capabilities and a watermark so you can test it.

There are photos of Bob, Keith, and David on the main page of Ajar Productions, and all three are ACPs on the InDesign forum, so you might ask there (or we can move this).

https://community.adobe.com/t5/indesign/bd-p/indesign

One thought that occurs to me is that InDesign supports PS layers and layer comps (Object > Layer Options). Maybe it would work if you place the PS file multiple times, then show one layer in each frame and use InDesign's animation panel? (I haven't tried it.)

~ Jane

[rayek.elfin]

While InDesign and In5 are capable products, I firmly believe in choosing the right tool for the right job. Your current job is a converting a simple Photoshop animation to a html5 format.

InDesign is NOT the tool for that. InDesign's animation options are quite limited, and the software lacks a timeline with keying. If you'd be creating an interactive ebook I would say go for it (in combination with In5). Not in this case, though. It would massively overcomplicate things.

In your case you need a tool to animate with in a similar fashion as Photoshop, but with html5 output. Are you on a Mac? Or Windows?

And what kind of animation are we discussing? Are elements moving, fading, changing colour, blending, and what not?  It would be handy to know in more detail.

[chuckeroo]

There is an image that moves left to right across about 780 pixles and reveals type as it moves across. At the end, when the image is gone, there is a type transition with a short fade up and move to a final screen. Nothing super complicated, just a timing thing to get the image to move smoothly. This is all being done on a Mac with up to date software and OS.

[rayek.elfin]

That could be easily achieved in any of the listed apps. I'd suggest to try them out. Hype is quite simple to use, but the same could be said about Animate CC (which is already in your tool bag). You are already used to Photoshop's timeline, which should prove helpful.

[Nancy OShea]

HTML5 canvas is a web API that runs in your browser. 

I have no way to convert animated GIF (image)  to HTML5 canvas (code). 

All I can suggest is recreating the HTML5 canvas project in Animate CC.  See link below.

https://helpx.adobe.com/animate/using/creating-publishing-html5-canvas-document.html