Simple GIF animations how-to

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.

  1. Download the template from here
  2. Extract it into a separate new folder, called something reasonable like bird-animation-1
  3. Replace the image.gif file by your own GIF image
  4. 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.

  5. 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: sample bird GIF animation

Martin

CoverPage CTO and Co-founder Everybody calls him Blackie. He is the oldest! Well, at least in the company. He is working in our company for 8 years already and he stood at the very first CoverPage code line. With his deep knowledge of IT technologies throughout the spectrum of platforms (including web, desktop and mobile) he is the glue that sticks the pieces of CoverPage platform together. He is responsible for transforming the CoverPage visions into reality, keeping an eye on functionality, consistency and user experience.
From what he has done in his professional life so far, he is a real IT engineer guru. But have you met musically gifted IT guy, with great sporting abilities?? Well, we've been lucky. Careful, he can challenge you in valley-ball or bass guitar any time.