This document compiles the top tips collected from years of helping users on the , and from the. Writing custom actions for events Issue: when you need an action that is not available in the Events dialog. 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 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. You may also set other settings such as the transition type, duration, etc. Switch back to Design view. Now we will add the custom action to be triggered 5 seconds after the page is shown. 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. Remove the first event that you added just to generate the action code to copy: You now have the 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. 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. To do this, go to Code view, look for the action that goes to page1, and copy it. It'll look like this: gwd. You now have the that outputs the input text content in the console window when there is a change event in the input field, i. Adding global variables in Design view This tip describes how to add a global variable in Design view without switching to Code view. When working with dynamic text, you might encounter the problem where the text ends up longer than expected. If you have this issue, we have the solution! You can see that the text content is bound to the product name in the Dynamic panel. There are actually two issues occurring here: the right item text has become smaller, and it's also overflowing its container. Copy the code below and paste it inside the tag before the closing bracket. The text now stays within its bounding box due to truncation—but it might be a little small. Currently it's set to 7, but adjusting it to 12 may look better, and there are 2 ways to do that—either in the gwd-text-helper tag to specify a global setting for all text in your document, or to control each text element separately common for headlines or titles , add the tag directly to the paragraph element like this: You may also prevent text resizing entirely by using a gwd-min-font-size-px value equal to your initial size 16px in this case. These controls should solve most dynamic text issues, but there is one case where you may want a little more control—the case of vertical centering. With these three controls in hand truncation, minimum font size, and vertical positioning , you should be able to solve the most common dynamic text formatting issues. Give these tips a try and let us know how they work for you in the comments! Posted by Kent M, Google Web Designer This document compiles the top tips collected from years of helping users on the , and from the. 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. 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. 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. Any change that is made to the group is reflected in all the instances of that group see our. 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. This workflow will be described in a future dynamic tips blog post. You can also watch the YouTube video on this topic. In this example, a div is hidden until the 3s mark. Then it is animated until 5s and disappears at 5s. 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. Now you have accomplished turning an element on or off at a certain keyframe! You can view the or check out our to use other ways to achieve the same effect. 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. Select the image on the stage to be changed, right-click on it, and select Swap image... Click OK to save. When using animation, the best practice is to animate using CSS transform to avoid choppy animation. 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. 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. In this example, this is 3000 with forward direction. However, working with a dynamic creative can be tricky. Some of the values required by your creative, like call to action CTA text, Product Names, Exit URLs, etc. Google Web Designer's Dynamic properties dialog can help you bind such values to elements in your creative, but what if you want to post-process these values before they are bound to your creative? In this article, we will tackle one such case - adding a custom exit function to your dynamic remarketing creative, which lets you post-process the exit URL before exiting to it. This helps Google's optimization engine understand which product was clicked on, and allows us to further improve performance of dynamic creatives. Repeat the above steps for the other five products in the creative, changing the index accordingly, e. To test your changes, follow the steps in the Bid Manager dynamic creative to upload your creative in Bid Manager. Then, preview the creative and click on the products to verify your custom exits are working as expected. Creating custom exits isn't so tricky after all! We've just shown you how your dynamic creative can use custom exits and send information about product-level clicks. If you require post-processing of exit URLs, try these steps with your creatives and let us know what you think in the comments below. Whether you're copying and pasting across projects or dragging and dropping layers across the timeline, the tool allows you to work the way you need. And users will still be able to click each layer to lock or hide, if desired. Using these new functions for animated property values, users will gain more control over their animation transitions.
