Google Web Designer Tips – Part 1

This document compiles the top tips collected from years of helping users on the

Note: if the animation of an image is choppy on IE when using CSS transform, wrap the image with animation in a div by right clicking on the image and selecting Wrap, then in the Properties panel of the parent div, set Selection 3D Rotation Z to 0.01 to workaround the issue.

2. Pixelation when using 3D scale for animation

Issue: when using 3D scale for animation, the image becomes pixelated when scaled up.
Solution: start with a large image that is the same size as the scaled up image. Add your starting and ending keyframes. At the starting keyframe, scale down the image using the Properties panel’s 3D scale options. This creates an animation where the image grows in size without being pixelated.

3. Groups for reusable elements

Grouping objects creates a reusable element that can be placed in documents as “instances”, which are references to the group’s elements. Any change that is made to the group is reflected in all the instances of that group (see our

Add the second keyframe where you want to show the element, at 3s in this example, and set the opacity of the element to 1.

At this point, if you preview, you will see that the element animates from 0 opacity to 1 because the easing is set to linear by default.

Right-click on the span between the keyframes and change the easing from linear to step-end. At this point, the element will not show until the second keyframe.

Add a third keyframe, at 5s in this example, and animate your element (in this example, it travels across the stage).

To hide the element again, add another keyframe at 5.5s, and set opacity to 0 and easing to step-start.

Then drag the keyframe so it’s right next to the keyframe at 5s.

Now you have accomplished turning an element on or off at a certain keyframe! You can view the