A common technique when building complex animations in any medium is to create small looping animation clips that are used multiple times throughout the project, often in the background: birds flying, stars twinkling, falling snow, clouds floating in the sky, etc.

In this blog post we’ll demonstrate how you can create CSS keyframe looping animation clips in Google Web Designer, and then encapsulate them using Groups so you can manage them through the Asset Library and more easily use multiple instances of them throughout your larger project. By the end of this article you’ll understand:

  • How to use the Timeline to create perfectly smooth looping animations. 
  • How to use the Wrap and Group features of Google Web Designer. 
  • How to edit your new group directly from the Asset Library. 
  • How to create new instances of the group from the Asset Library. 

We’ll use a very simple example to demonstrate the techniques. Begin by creating a new file. Choose the Advanced Mode for the Timeline in the “Create new blank file” dialog. When the file is open, use the Tag tool to draw a single DIV element on the stage and color it red:



Here you can see we have set the ID property on the element to “redbox” as well. That’s not required, but makes it easier to track the original animated element through the process. We’ve also chosen to work with a DoubleClick ad file, but again that’s not necessary--all of these features are available to all file types.

The animation we will build will be a simple scaling animation where the red box shrinks a little and then grows back to its original size. We’ll have this animation last half a second, and when we set it to looping it will look like the box is pulsating.

One of the most important things about creating smooth animation loops is to make sure the endpoints match. You want the visual state of the animated element at end of one iteration of the loop to match up perfectly with the visual state at the beginning of the next loop, otherwise the loop will not appear continuous. With the Timeline that’s easy to do by defining the endpoints first.

Using the Select tool, select the element on stage if it’s not already selected. Then in the timeline add a keyframe at the maximum time for a loop--in our example, at half a second:




This creates a start and end keyframe that have identical states. Next, add a keyframe at 0.24 second:



Now we can use the Properties panel to scale the element’s size. In the Translation, Rotation and Scale section click the link icon on the left of the scaling directions so the scaling will be uniform in all directions. Then make sure the middle keyframe is selected and use any of the X, Y, or Z scales to shrink the element by half:


This will cause the element to shrink on stage. This change will be recorded in the selected keyframe, and that will result in an animation clip that has perfectly matching starting and ending points.

Back on the Timeline, click the animation repeat icon on the red box layer to bring up the looping dialog. Choose Infinite, which will cause the short animation to be repeated throughout the rest of the Timeline:



You can preview your animation to make sure it works the way you expected.

Now we have a perfectly looping animation clip. Often times these clips need to be used in multiple places in a larger composition, so we need to be able to paste multiple instances of this animation wherever we want. To do this we will use the Wrap and Groups feature of Google Web Designer.

The Wrap feature of Google Web Designer simply wraps the selected element(s) with a DIV. This is useful for encapsulating a single element in the DOM, and also for wrapping together several different elements in a single entity. The DIV has no special functionality, it simply acts as a container. We’ll use this in our example to simply encapsulate the animated element to make it easier to manipulate in the future.

The Groups feature of Google Web Designer allows you to create reusable objects from existing elements of your project. Groups appear in the Asset Library, and you can create new instances of the group by dragging and dropping from the library onto the stage.

We will start by using the Wrap feature to wrap the animated element in a DIV element. With the Selection tool active, right-click on the element on stage and choose Wrap from the context menu. This will wrap the element in a DIV. To create a Group, right-click on the element again and choose “Create group…” from the context menu. Give the group a name using the editor:



When that is done, the new group will appear as an asset in the Asset Library:



You can now easily drag-and-drop instances of the animation onto the stage:



Here we have added three more instances to the stage. When you preview the animation, they will all animate in sync with one another.

Since the animation clip is a Group, you gain all the benefits of groups. You can, for example, edit the group template using the Asset Library, and those changes will be made to all instances of the group. To do this, right-click on the group in the Asset Library and choose Edit from the context menu. This will allow you to edit the group directly on the stage.

As an example, let’s add a color change to the animation. Double-click on the wrapper DIV to drill down into the DOM. This will reveal the animated element in the Timeline:



Notice that the DOM breadcrumb indicator just above the Timeline shows that you are now within the wrapper DIV of the group.

Select the middle keyframe and use the Color panel to change the color of the element to blue:



As before, this change will be recorded in the selected keyframe. You can preview the change and add other animations (such as translation or rotation) if you want. To exit the Group editor click on the top-level (left-most) DIV marker in the DOM breadcrumb.

Now when you preview your animation, you’ll see that all of the instances now change their color as well as scale.

Using this technique you can easily create any looping animation and encapsulate it in a group for easy use throughout your project. In this simple example we’ve animated a single DIV element, but this same technique can be used to create looping animation clips with any valid element, including images, text, and custom components. You can even put multiple animated elements into a single group, just select all desired animated elements on the stage and then right-click and choose “Create group” from the context menu. Give it a try and let us know what you create in the comments below.

 Posted by Jonathan Reid, Senior UX Engineer