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.
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.
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.
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.
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.
Notice that the DOM breadcrumb indicator just above the Timeline shows that you are now within the wrapper DIV of the group.
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.
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.
How to use the Timeline to create perfectly smooth looping animations.