Web Designer Blog
The latest news and tips from the Google Web Designer team
Google Web Designer Tips - Part 2
Wednesday, January 24, 2018
This document compiles the top tips collected from years of helping users on the
forum
, and from the
Google Web Designer blog posts
.
1. Writing custom actions for events
Issue
: when you need an action that is not available in the Events dialog.
Solution
: You can write custom actions in Google Web Designer easily using the following tips:
Use the
setTimeout
method to call a function or evaluate an expression after a specified number of milliseconds (see example 1 below).
Add an event to perform an action, then copy that action in Code view to use in your custom action (see example 1 below).
Use Code view to add a global variable (under the line window.gwd = window.gwd || {};) if you want to set a flag and only trigger an event when the condition is true (see example 2 below).
If you want to use an event that isn't listed in the Events panel (e.g. ‘change’), you can add an event that exists in the Events dialog, then edit it in Code view (see example 3 below).
Check our help page on
Component APIs
for properties, methods, events, and more examples.
Example 1: go to a different page after 5 seconds (use setTimeout)
Note: this tip can be used to go to another page after 30 seconds to meet the
AdWords requirements
that state animations cannot last longer than 30 seconds.
In this example, there is an animation that loops infinitely in the first page and a second page without any animation. We will add an event so that 5 seconds after the first page is shown, it will go to the second page.
To start, we want to find the code that goes to the second page so that we can use this in our custom action. This can be done by adding an event to go to the second page. The specific event doesn’t matter, since we're only concerned with the action at this point (going to the second page).
Open the Events panel and click on the + button to add an event.
Select the page ID for the first page as the Target.
Select
Mouse > Click
as the Event.
Select
Google Ad > Go to page
as the Action.
Select
gwd-ad
as the Receiver.
Select the second page (page1_1 in this example) in Configuration. You may also set other settings such as the transition type, duration, etc.
Click
OK
to save.
Switch to Code view and find: script type="text/javascript" gwd-events="handlers". Copy the action code for going to the second page.
Switch back to Design view. Now we will add the custom action to be triggered 5 seconds after the page is shown.
On the first page with animation, click the + button in the Events panel to add an event.
Select the first page ID as the Target.
Select
Page > Ready to present the page
as the Event.
Select
Custom > Add custom action
as the Action.
In the Custom Code dialog, name your function. In this case, you might use a name such as after5s. Then enter the following code, pasting the action code that you copied previously:
setTimeout(gotoPage, 5000); function gotoPage() { gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1_1', 'none', 1000, 'linear', 'top'); }
Click
OK
to save.
Remove the first event that you added just to generate the action code to copy:
You now have the
working file
that goes to the second page 5 seconds after the first page is shown.
Example 2: use timeline events to loop the ad through all pages twice.
In this example, the ad has 3 pages with animation, each with an event to go to the next page after the animation is finished.
The ad loops through all the pages twice, i.e., page 1 > page 2 > page 3, looping one more time and ending on page 3 after the second loop. Let’s add timeline events on each page to go to the next page at the end of the animation.
Add a timeline event to go to the next page at the end of the animation
On the first page, at the last keyframe, right-click on the Events layer and select
Add event
.
Double-click on the event marker to open the Events dialog.
Select
Google Ad > Go to page
as the Action.
Select
gwd-ad
as the Receiver.
In Configuration, select the page ID of the page to go to. In this example, it’s page2. You may also set other settings such as transition type, duration, etc.
Click
OK
to save.
You can edit this event by double-clicking on it in the Events panel.
Repeat the steps above to add timeline events for the other pages. On the last page, configure the event to go back to the first page.
The Events panel should show the following timeline events:
When you preview the ad, it will start with the first page, go to the next page at the end of the animation, and continue to loop. Next, we will set the ad to loop through the pages once and stop at page 3.
Use a counter to keep track of the loop
Add a global variable as a counter by going to Code view and searching for window.gwd.
After the window.gwd line, add the following code to initialize the counter: var counter = 1;
On the last page (page3 in this example), only go back to page1 if the counter is less than 2, then increment the counter. To do this, go to Code view, look for the action that goes to page1, and copy it. It'll look like this: gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1', 'none', 1000, 'linear', 'top');
In Design view, go to page 3, and double-click on the event marker at the end of the animation to add another timeline event. Select
Custom > Add custom action
in Action.
Type in a function name such as count.
In the code text area, enter code to check whether the counter is less than 2, paste the code to go to page 1, then increment the counter like this:
if (counter < 2) { gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'page1', 'none', 1000, 'linear', 'top'); counter++; }
Click
OK
to save.
In the Events panel, remove the timeline event on page3 that goes back to page1 now that we have the custom action with the counter to do that.
You now have the
working file
that loops twice through the 3 pages and stops at page 3.
Example 3: use custom events
In this example, you will draw a text input element on the stage and add a ‘change’ event to output the text content in the console when the Enter or Tab key is pressed.
Select the Element tool in the Toolbar.
Click on the custom element and type input in the Element field.
Draw the input element on the stage and give it an ID in the Properties panel.
Right-click on the input element on stage and select
Add event...
Select
Mouse > click
as the Event.
Select
Custom > Add custom action
as the Action.
Type in a function name such as myInputChange.
In the code text area, add the custom action to log the value of the input field to the console when it's changed:
inputContent = document.getElementById('input').value; console.log(inputContent)
Click
OK
to save.
Now we will replace the click event with a change event in Code view in 2 places:
When you switch back to Design view, you'll see the change event in the Events panel and you can edit it further as needed.
You now have the
working file
that outputs the input text content in the console window when there is a change event in the input field, i.e., the input’s value is committed on an Enter or Tab keypress.
2. Adding global variables in Design view
This tip describes how to add a global variable in Design view without switching to Code view.
Click on the plus button in the Events panel to add an event.
Select
document.body
as the Target.
Select
Google Ad > Ad initialized
as the Event.
Select
Custom > Add custom action
as the Action.
Give the function a name such as declareVars.
In the code section, declare and initialize your variables with the gwd. prefix such as gwd.myCounter = 0;
When the ad is initialized, the global variables can be used anywhere in your file.
Attached is the
example
that traces the gwd.myCounter variable in the browser console log using a timeline event at the first keyframe.
We hope you have enjoyed these tips, and don't forget to download the working files and give these solutions a try!
Posted by San K, Google Web Designer Team
Google Web Designer Tips - Part 1
Friday, December 15, 2017
This document compiles the top tips collected from years of helping users on the
forum
, and from the
Google Web Designer blog posts
.
1. Use CSS transform for animation
Issue
: choppy animation when animating Top/Left/Width/Height.
Solution
: use CSS transform (
3D translation
and
scale
) for animation instead of Top/Left/Width/Height.
Google Web Designer defaults to CSS transform when creating CSS-based animation because the CSS transform property provides a higher frame rate and smoother animation. What this means is that when you use the selection tool to move an element or the transform tool to resize it in an animation, it will default to CSS transform (3D translation and scale section in the Properties panel) (see our
help
). However, many users change the Top/Left/Width/Height fields in the Properties panel when animating elements and this will cause choppy animation.
To avoid choppy animation, try using 3D translate X and Y for position, and 3D scale for size in the Properties panel when you animate elements. If you use the selection tool (or arrow tool) to move an element or the transform tool to resize an element, that should take care of it for you by default.
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
help
).
One example where groups are useful is a CTA button with an exit event that exists on different pages in the creative. Another benefit is that events for the elements in the group are retained in all instances of the group as long as the group instance has an ID assigned to it.
To create a group, right-click on the element on stage and select
Create Group...
You can then view the group in the Library panel and drag it on to the stage to create additional instances.
Groups are also used in the Swipeable and Carousel Galleries in dynamic creatives to display a custom layout for each product item in a collection. For example, you can create a group to display a product's image, name, description, price, etc., and this layout can be repeated for each product in the feed. This workflow will be described in a future dynamic tips blog post.
4. Make an element appear/disappear at a specific time during the animation
Issue
: how to create an animation with an element that needs to be hidden/shown at certain keyframes.
Solution
: use
opacity
and
step-end/step-start
easing. You can also watch the YouTube video on this topic
here
.
In this example, a div is hidden until the 3s mark. Then it is animated until 5s and disappears at 5s. To do this, let’s switch to the timeline’s Advanced mode then select the first keyframe. In the Properties panel of the element, set the opacity to 0 to hide the element.
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
source file
or check out our
blog post
to use other ways to achieve the same effect.
5. How to replace an image without losing the events or animation
Issue
: some users build a new creative using an existing creative and want to easily change an image without losing events or animation.
Solution
: use
Swap image
in the context menu (see our
help
).
Select the image on the stage to be changed, right-click on it, and select
Swap image...
In the Swap image dialog, select the new image (if it’s already in the Library), or add a new image and select it. Click
OK
to save.
6. How to update an element’s size and position without affecting animation
Issue
: when building multi-size creatives, many users may start with one size, then build additional sizes using the first completed creative instead of using responsive design. In this workflow, it is necessary to update the element’s size and position in the new creative while keeping the animation the same.
Solution
: use CSS transform for animation (solution #1 in this post) , then update the Top, Left, Width, and Height properties in the
first keyframe in Advanced mode
to update the element’s position and size without affecting the animation.
When using animation, the best practice is to animate using CSS transform to avoid choppy animation. In addition to the performance benefit, you can also quickly update the element’s size and/or position without having to update all keyframes.
For example, let’s say you have a 100x100px element at the first keyframe like this:
In the second keyframe, it moves across the screen and shrinks to half of its size like this:
Now let’s say you’re building a bigger creative and the element has to be 200x200px. You can simply select the first keyframe and update the Width and Height properties. Since Width and Height are not used to animate the element, what you change in the first keyframe will propagate across all subsequent keyframes.
The element will now be 200x200px and travel across the screen by 200px with its size reduced in half:
7. How to loop the Swipeable Gallery infinitely
Issue
: when autoplay is set, the Swipeable Gallery only autoplays until the last frame and then returns to the first frame.
Solution
:
autoplay
the Swipeable Gallery infinitely by rotating once when the autoplay ends, and setting the rotation time and autoplay duration for smooth looping.
In this example, there are 3 images, autoplay is set in the Properties panel, and autoplay rotation is set to 3000 in the Advanced properties for the Swipeable Gallery. This means that the gallery autoplays from the first to the last frame in 3 seconds.
When you preview, you will see that the Swipeable Gallery autoplays once, then goes back to the first frame and stops. To autoplay it infinitely, add an autoplay ended event to rotate once forward.
Right-click on the Swipeable Gallery and select
Add event
.
Select Swipeable Gallery >
Autoplay ended
as the Event.
Select Swipeable Gallery >
Rotate once
as Action.
Select the Swipeable Gallery ID as the Receiver.
In Configuration, set the Rotation time to be the same as the autoplay duration. In this example, this is 3000 with forward direction.
Click OK to save.
You now have a
working file
that loops the Swipeable Gallery infinitely.
We hope you have enjoyed these tips, and don't forget to download the working files and give these solutions a try!
Posted by San K, Google Web Designer Team
Creating Looping Animations with Google Web Designer
Monday, March 14, 2016
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
Labels
3D
animation
animations
BYOC
carousel
clips
css
CTA
custom code
Display
DoubleClick Bid Manager
DoubleClick Studio
dynamic
engagement ads
English
events
exit
fluid layout
gallery
google cultural institute
google web designer
Google Web Designer Blog
groups
HTML5
javascript
lightbox
looping
masking
new release
new version
pages
publish
responsive
sales animation
swatches
swipeable
text
timeline
UI
Archive
2018
January
Google Web Designer Tips - Part 2
2017
December
April
March
2016
November
June
May
April
March
February
Feed
Follow @googlewdesigner
