Creating an Ad in GIF style | How-To?

[Ez Poxy]

Hey Guys,

We are in the process of creating an a Responsive Ad through GWB ( still in the process of learning how to)

And we would like to implement GIF style background image where its sort of an action that's happening behind the button and text to show what our product can do.

How is best to achieve this with using GWB?

Thank you,

Andrei | EZ-POXY

[San Khong]

You can use our timeline to create animation to play in the background.  Animation can be looped to play infinitely.  Keep in mind that some ad network (AdWords) only allows the animation to play for a maximum of 30 seconds or so.

San

Google Web Designer team

[Ez Poxy]

Do you have a tutorial or a suggested information on how to achieve that result? 

I have tried and it didn't turn out the way gifs just run... I wasn't able to switch between images making consecutive images to show and previous ones disappear to create animation effect such as GIF.

[San Khong]

It's a little tricky to achieve what you want to do.  I attached a sample file that you can try to follow.  In the sample file, I have 2 divs, one red and one pink.  The red one is supposed to animate first with the pink one not visible, when it reaches a certain time, red div disappears and the pink one starts to appear and animate.  Here are the steps:

1. Set up the animation for your first element.

2. Switch to Timeline Advanced mode and add a timeline event to turn visibility for the second element to hidden with the following steps:

 a. Right click on the timeline Event layer and click Add event.

 b. Double clicking on the timeline event marker and select CSS for Action, Set styles, pick the element id for the element you want to hide as the receiver (make sure the element has an id in the Properties panel).

 c. Click the + sign to add property to change and type visibility for property, and hidden for value.

3. Set up the animation for your second element.

4. Drag the first keyframe of the second element to the point where you want it to initiate animation (animation delay).

5. Add another timeline event to turn visibility for the first element to hidden and the second element to visible by using custom action since you want to change properties on 2 elements.  Please look at my test file.

You can also try to import an animated gif in Google Web Designer.

Hope it helps.

[Ez Poxy]

Hey San I have used Gimp software to make Gimp and then used http://gifgifs.com/optimizer/ to optimize Gif in order to fit in 150Kb

When the banner plays in the GWD the Gif keeps playing, however when I go to Preview it shows the background with a gradient instead:

Any advice on what is the problem and how to fix it?

[San Khong]

Hi Ez,

When you said Preview, do you mean GWD browser preview?  Which browser did you see the issue in?

Can you please share the gif with me so I can check it out?  You can also share it on Drive and send the link to gwd-s...@google.com.

Thanks,

[Ez Poxy]

Hey San,

Yes, it was previewed in GWD browser preview. Google Chrome. I have uploaded the gif as well as the Published files to Dropbox from the GWB for you to see. Emailing Now.

Looking forward to hear from you!

[Ez Poxy]

San,

Email has been sent from andrei...@gmail.com

[San Khong]

Ez,

I cannot reproduce the issue on all 3 machines, Mac, Windows, Linux on all browsers, Chrome, IE, Firefox and Safari.  The animated gif plays fine for when I opened your index.html in any browser.

Can you please try opening the animated gif in Chrome to see if it plays for you?  If not, check if you have the chrome extension that stops animation from playing (something like Animation policy)?

[Ez Poxy]

Hey San,

I have opened it up in Chrome and it does work! Thank you.

As far as sizes of Ads with Gifs go, would you suggest any of the tools to down-size the gifs, as I would love to implement longer gifs but as you see the one I have sent you is already almost 150kbs.

Also, Ads with Gifs, is it correct that AdWords doesn't allow Gifs to be in the ads that are Dynamic Ads or Responsive Ads?

Thank you for your support San!

[San Khong]

Ez,

I looked at the AdWords image ads policy and also here for animated gif ads, it doesn't mention that animated gif is not allowed in html5 ads.  However, it did mention the following:

• Animation length must be 30 seconds or shorter
• Animations can be looped, but the animations must stop after 30 seconds
• Animated GIF ads must be slower than 5 FPS.  This is for animated gif ads, not sure if the same requirement applies on HTML5 ads containing animated gif.

So you cannot have the animated gif that loops constantly. 

As optimizing it, there are tools out there that you can use to reduce the size of the animated gif.  Sorry I do not have any recommendation as I'm not familiar with them.

Hope it helps.