Yes I know, GIFs are not a modern image format, nor the ideal way, how to do animations in this hype of HTML5 and CSS3. BUT for many of you guys out there not being Unicorns at the time, it can be an easy and neat solution to enhance your digital projects with a little movement.
CoverPage projects can be enhanced with animations using HTML and the ‘Web view’ tool within the platform. The HTML is then displayed with the platforms default web engine (WebKit on iOS and Chromium on latest Androids). These engines are capable of displaying animated GIF files included in HTML files.
This means you are able to use GIF animations in your digital projects with CoverPage. But you still need a little HTML code to be able to use them. To make your life easier, I’ve decided to post a template you can use to place GIFs into CoverPage digital projects. It is really a simple one, all you need to do is edit the dimensions of the image inside the <img> tag in the index.html file to reflect the actual size of your GIF image.
- Download the template from here
- Extract it into a separate new folder, called something reasonable like bird-animation-1
- Replace the image.gif file by your own GIF image
- Locate the index.html file inside the folder and open it in a text editor of your choise
You will see a code like:
<html> <head> <title>Sample GIF animation</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <img src="image.gif" width="178" height="90" alt="" /> </body> </html>
The <img /> and it’s width and height attributes are where you need to enter the actual size of your GIF file. Save it.
- Now from the CoverPage Publisher with the Webview tool, browser for the whole folder bird-animation-1 as you would with any other HTML.
The result should look something like this: