Web Designer Blog
The latest news and tips from the Google Web Designer team
A revamped UI and responsive design capabilities, now in Google Web Designer
Tuesday, May 3, 2016
Today, we're releasing a new version of Google Web Designer that includes an entirely revamped UI and responsive design capabilities to help you create true responsive ads!
Check out our
Announcement
and the resources below for more information!
Resources:
Release Notes
Blog
Help Center Articles:
Responsive
,
UI
Videos:
Responsive
,
UI Overview
Posted by Jasmine Rogers, Google Web Designer
Popular Questions from the Google Web Designer Forum
Monday, April 25, 2016
The Google Web Designer Community Forum
is a resource that our customers use to ask questions, provide answers and reach out to our team directly. If you haven’t visited the community forum yet, feel free to check it out. It contains lots of useful information, tips, questions, etc. from users like yourself.
In this blog post, we’ll highlight some of our frequently asked questions from the forum.
How do I make an asset appear at a specific time during my animation?
For example, let’s say we have the following file, a simple animation spanning two keyframes where a yellow DIV animates from left to right:
When this animation finishes, we want to display another asset, say a blue DIV. Many users will often add the blue DIV at the last keyframe and be unpleasantly surprised that this new DIV appears in the first keyframe as well.
Any time you add a new element to a document, it's present in the document at all times, however, we can control when the element “appears” by setting its display, visibility, or opacity styles. Of these styles, only opacity is animatable, so let’s cover that first. We’ll also cover using the display or visibility styles to achieve this effect a bit later.
Approach 1 - Animating opacity from 0 to 1 between two keyframes
First, let’s select the element in the first keyframe and use the Properties panel to set its opacity to 0.
The element should now be invisible throughout the entire animation.
Now we’ll Insert a new keyframe at the end and change the duration between the last keyframe and the keyframe right before it to 0.01 seconds.
So far, the element has opacity 0 throughout the animation.
Select the element in the last keyframe and use the Properties panel to set its opacity to 1.
The blue DIV’s opacity is now animating from a value of 0 at the first keyframe to a value of 1 at the last keyframe. The middle keyframe has an interpolated value for its opacity.
Next, select the blue DIV in middle keyframe and use the Properties panel to set the opacity to 0 there as well.
If we preview the resulting animation in the browser, we can see the blue DIV’s opacity is now animating from a value of 0 at the first keyframe to a value of 0 still at the middle keyframe. The animation duration between the first and middle keyframes is 0.5 seconds. The blue DIV’s opacity then quickly animates from 0 to 1 because the duration between the middle and last keyframes is 0.01 seconds, making it seem like the blue DIV appears after 0.5 seconds.
Let’s recap the steps on how to make an element appear at a specific point in time in an existing animation:
Select the first keyframe/thumbnail in the animation.
Add the new element at the first keyframe/thumbnail.
Select the element at the first keyframe/thumbnail and use the Properties panel to set its opacity to 0.
Add a keyframe at the time you want the element to “appear’ (let’s call it time
t
). Its opacity will still be 0 at time
t
.
Add another keyframe right before time t (let’s call it time t’) and set the duration between
t’
and
t
to 0.01s.
Select the element at time
t
and set its opacity to 1.
Select the element at time
t’
and set its opacity to 0.
Download
timeline_animate_opacity.zip
to see the final result.
Approach 2 - Using Timeline Event Markers, CSS Panel, and the Events panel to show the element at the desired time
As an alternative, you can also achieve the same results by using display or visibility styles:
Select the blue DIV and use the Properties panel to give it an id (let’s use ‘bluediv’ for the id in the example below).
Select ‘bluediv’ in the first keyframe and open the CSS panel.
Add the style: visibility: hidden
Switch the Timeline to Advanced mode.
Move the Timeline’s playhead to the time you want the element to be visible and add a new Timeline event marker by clicking on the diamond icon in the Timeline panel’s Events row.
Double-click on the newly added diamond event marker to bring up the Events dialog and add the following action for that event. Action: CSS -> Set styles -> ID of the element -> ‘+’ button to add the CSS style visibility: visible.
We can now preview to view the resulting animation in the browser.
Download
timeline_css_event.zip
to see the final result.
Can I use external JavaScript libraries in Google Web Designer?
Yes, you can! In fact, external JavaScript files are often used in ads. You can verify this by creating a new banner file and viewing the folder that you created the file in. In the example below, we’ve named a file ‘using_external_js’ and then browsed to its location. You will see some JavaScript files next to the HTML file, something like:
If we switch to Code view and look at the document’s head element, we’ll see script tags with their ‘src’ attributes set to these JavaScript file:
You can also add references to your own external JavaScript files in the head element after these script tags. The references can be relative paths from your HTML file, such as gwdpage_min.js in the example above, or they can be absolute paths to JavaScript libraries on the web, such as the link to DoubleClick studio’s Enabler library in the example above.
When you publish your ad, you have the option to include your JavaScript files directly in your HTML file rather than referencing them by selecting "Inline local files" in the publish dialog:
You may find commonly used JavaScript libraries on a CDN hosted by your publisher, similar to Enabler.js in the example above. For example, DoubleClick hosts common JavaScript libraries such as the popular
Greensock animation libraries
. Let’s use one of these libraries to add some interactivity to our ad.
In Code view we’ll add a script element to reference the library we want to use. For this example, we’ll add the following script element to the list of script elements in the head.
<script type="text/javascript" src="
https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.18.0_56fa823cfbbef1c2f4d4346f0f0e6c3c_min.js
"></script>
Now let’s switch back to Design view and add a DIV element using the Tag tool.
We’ll then use the Properties panel to set a background color on it, in this example let’s use blue.
Once the color is set, we’ll also use the Properties panel to set the id to ‘bluediv’.
Next, Right-click on the element and select “Add event…” to bring up the Events dialog.
We can set up the event as follows:
Event: Mouse->click
Action: select Custom, and click on ‘+ Add custom action’ to bring up the Custom code section
In the ‘Custom code’ dialog, enter a name for the function (let’s name it ‘rotateDiv’) and add the following custom code: TweenLite.to('#bluediv', 1, {rotation: '+=360'});
Now, preview your file in the browser and click on the blue DIV. You'll notice on each click the blue DIV will rotate one full turn using Greensock’s TweenLite library.
Download
using_external_js.zip
to see the final result.
Closing Thoughts
Learning how to customize animation and utilize popular JavaScript libraries can be powerful tools in creating amazing, interactive content. Let us know what you create with Google Web Designer and please continue to provide feedback and comments in our
Community Forum
!
Posted by Nivesh, UX Engineer
Exploring gallery components in Google Web Designer
Monday, April 18, 2016
In this article we'll be exploring the advanced capabilities of Google Web Designer's gallery components. Together we'll author a standard 300x250 banner ad, which presents a selection of product images, and enhance it as we go.
To start, we'll add a Swipeable Gallery component to our document by dragging a new instance from the Components panel to the stage. Click on the gallery to select it on the stage, then go to the Properties panel and click the icon next to the Images property to open the Gallery Images dialog. Import a few images (I'm using six) and hit OK.
We now have a swipeable gallery of images, but this may not be apparent to viewers. In its initial configuration a Swipeable Gallery will only display a single product image, and its appearance will never change unless the viewer swipes on it. They're likely to assume that it's just a static image. Let's make that clearer.
Autoplay
To demonstrate that the image the user sees is actually a swipeable gallery, we'll configure the gallery to automatically play through its contents. The first step is to check the "Autoplay" box in the component's Properties panel. By default this will automatically play through the gallery contents once over a period of three seconds, but let’s customize that.
Under the "Advanced properties" dialog for the gallery component, we have two more properties for controlling autoplay behaviour. The first is fairly self-explanatory: the "autoplay duration" properties defines the amount of time (in milliseconds) that the gallery plays automatically. At the end of this duration, it will jump back to the first frame. Note: You may want to be cautious with how large you make this value. Most ad networks have limits regarding how long animations are allowed to run without viewer interaction. We'll go ahead and set ours to 18000 (18 seconds).
The other autoplay property is "autoplay step interval". This controls how long each frame is displayed before moving to the next frame during autoplay. By default, this property is not set, and the total autoplay duration will be divided in order to display each frame exactly once. So given our example of 18 seconds for 6 frames, each frame would be displayed for three seconds. We'd like something a bit faster, so we'll enter an autoplay step interval of 1500 (1½ seconds). This will result in each frame being displayed twice during the autoplay. The autoplay will be stopped immediately if the viewer swipes on the gallery.
Exiting the Ad
Our creative is still missing an essential capability: a way for the viewer to jump to the product page by exiting the ad. It's common to use the Tap Area component to mark a section of the ad as tappable, and add an event handler to exit to a given URL when the viewer taps. However, if you place a Tap Area component on top of the gallery, the viewer will not be able to swipe through the gallery because those swipes will be intercepted by the Tap Area instead. This may be suitable for some cases, but it's not what we're looking for here.
If we only have a single landing page for all of the products, we can add a single tap event handler to the gallery which exits to that page. We do this by pressing the "+" button in the Events panel and selecting:
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame tap
Action
: Google Ad: Exit ad
Receiver
: gwd-ad
Configuration
:
Metrics ID
: frameexit (or an ID of your choice)
URL
: http://example.com/all-products
However, we often have separate landing pages for each product, and would like to send the viewer to the one corresponding to the product they clicked on. This behaviour can be enabled by using the "Exit URLs" advanced property of the gallery. Exit URLs is a comma-separated list of URLs corresponding to each product in the gallery. For example, if the products in our gallery had pages at the following URLs (in gallery order) - http://example.com/product-1, http://example.com/product-2, http://example.com/product-3, etc, we could then assign them to their respective frames by setting Exit URLs to the following value:
http://example.com/product-1,http://example.com/product-2,http://example.com/product-3,http://example.com/product-4,http://example.com/product-5,http://example.com/product-6
If you don't want a given frame to trigger an exit, you can leave its entry in the list empty. For example, if you only wanted the third frame to trigger an exit you could set Exit URLs to the following value:
, , http://example.com/product-3, , ,
Note: When you’re using Exit URLs this way, you cannot include a Frame tap event.
Pages of Multiple Frames
We can further configure the gallery to display multiple products at once, essentially grouping our frames into pages with multiple frames beside each other.
Let’s begin by setting the Swipeable Gallery component properties "Show Frames" and "Swipe Frames" to 2.
This will split the gallery's horizontal space between the available frames, and scale down the frames to fit (this behavior can be controlled by the "scaling" property). Clicks on each frame will still be recognized separately.
During autoplay we may still want to draw the viewer's attention to one item at a time, even if multiple images are visible. In order to support this, there is a "frame autoplayed" event which will be fired for each frame individually during autoplay, at a consistent interval. To enable this functionality we will use a custom JavaScript event handler to define the behavior we want. In this case, we'll dim the frames that are not currently activated.
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame autoplayed
Action
: Custom
Custom Action: New
:
Name
: gwd.fadeOtherFrames
Code
:
var frames = this.querySelectorAll('.frame');
var activeFrame = this.getFrame(event.detail.id);
for (var i = 0; i < frames.length; i++) {
if (frames[i] == activeFrame) {
frames[i].style.opacity = 1.00;
} else {
frames[i].style.opacity = 0.25;
}
}
When autoplay completes or is interrupted, the "autoplay ended" event will be fired. We'll use this to restore all frames to full visibility:
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Autoplay ended
Action
: Custom
Custom Action: New
:
Name
: gwd.restoreFrames
Code
:
var frames = this.querySelectorAll('.frame');
for (var i = 0; i < frames.length; i++) {
frames[i].style.opacity = 1.00;
}
Adding a carousel gallery
In this final section, we're going to get a bit fancier. To increase the emphasis on the active product, we're going to add a large Carousel Gallery component above our Swipeable Gallery, and put the same images in it. Whenever a frame in the Swipeable Gallery is autoplayed, hovered, or tapped, we'll also rotate the Carousel Gallery to display it. The end result will look something like this:
Let’s start by dragging a new Carousel Gallery component to the stage. Select the Swipeable Gallery, go to its Properties, copy the list of Images and paste them in the corresponding Properties field for the Carousel Gallery. Next we’ll, set the Carousel Gallery's Start Frame property to 1, to match the Swipeable Gallery and use the Transform control to resize and lay out the galleries.
Now we'll add an event handler to have it follow along with the autoplay:
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame autoplayed
Action
: Custom
Custom Action: New
:
Name
: gwd.syncCarousel
Code
:
document.getElementById(
'gwd-carouselgallery_1').goToFrame(event.detail.id);
Then we'll add two more, which will respond to viewer taps and hovers. We'll also have these cancel the autoplay, if it's still active, since we don't want autoplay to suddenly move the carousel again after it's just moved in response to a mouse hover.
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Mouse over a frame
Action
: Custom
Custom Action: New
:
Name
: gwd.stopAutoplayAndSyncCarousel
Code
:
this.stopRotation();
document.getElementById(
'gwd-carouselgallery_1').goToFrame(event.detail.id);
Target
: gwd-swipegallery_1
Event
: Swipeable Gallery: Frame tap
Action
: Custom
Custom Action
: gwd.stopAutoplayAndSyncCarousel
Finally, we need to prevent the viewer from swiping or clicking on the Carousel Gallery since it's not meant to be moved independently, but instead to track the movements of the Swipeable Gallery. We do this by using the tag tool to draw a plain element on top of the Carousel Gallery, to intercept any taps and swipes. This leaves us with the following stage layout and events:
Click the Preview button, and you should see the galleries appear in your browser and start autoplaying. Try swiping through the lower gallery and watch the top one follow along, or click one of the lower gallery frames to exit the ad.
Feel free to take the gallery components for a spin, and let us know what you think in the blog comments!
Posted by Jeremy, Software Engineer
Five features to explore in Google Web Designer
Monday, April 11, 2016
Since the public launch of Google Web Designer it has been exciting to see so many features evolve and new features being released. We are very grateful for all the great feedback we get from all of you, which has helped us to shape and further refine the current set of features.
So without further ado, let’s review five features and workflows you may find most useful in Google Web Designer.
1. Fluid layouts
Historically Google Web Designer only supported visual authoring of static layouts, where all elements were absolutely positioned and had their top, left, width and height styles set in pixels. This works well when all the content has a fixed size but doesn’t work so well when the top-most container size varies. Even small changes can require all the elements to be manually re-positioned.
So in order to support authoring ‘fluid’ layouts, the first step we took was to allow users to use percentages when setting any of those positioning styles. Allowing elements size and position to be defined as a percentage of the size of their container lets them shrink and grow with the container, but keeps the overall structure unchanged. While this covers the simple case of having a single element, it does not make the layout fluid when elements have a mix of fixed and percent-based sizes. To assist in the latter case, we added a fluid layout checkbox that can be combined with the existing alignment, distribution and spacing to calculate the correct layout position.
Here is an example to illustrate how the fluid layout checkbox works:
Below you can see an element containing an image and a Tap Area component. The image has a width of 50% and the button has a fixed size width of 50px.
If we shrink the container width down, the image element would automatically shrink too, as if scale were applied.
On the other hand, the tap area would remain unchanged and bleed over the container’s right edge. So let's try this: select both elements, and from the selection tool options check the Fluid layout option. Immediately after that click on the ‘space horizontally’ button.
Because fluid layout is enabled and we are aligning to the container, space horizontally will then calculate the correct styles to apply to each element inside the container in order to keep the same layout. This results in both the image and tap area resizing proportionally to their container.
In the following illustrations below you can see that we have shrunk and grown the size of the container while maintaining the layout.
2. Publish to Google Drive
Google Web Designer allows you to publish a document directly to Google Drive. At first it might seem that this is just an easy way to share your content or maybe have a separate backup of your published content. But by taking a few extra steps you can use this feature to preview your creative on any browser, desktop or mobile. Move through the steps below to enable serving your creative from Google Drive:
Start by creating a document and when you are ready to publish, select ‘Publish to Google Drive”.
Enter your Google credentials.
Leave the default options in the publish dialog, and click on Publish.
Once publish is completed, you can now open your browser and navigate to: drive.google.com
At the top of your list of files (if you sort by date) you should see a new folder named after your document.
Right click on that folder and select ‘Share…’
Click on get shareable link which enables link sharing on that folder.
Now double click that folder to go inside of it. You should now see your published files.
Right click on index.html and again click on ‘Share…’
In the dialog that opens click on the ‘get shareable link’. At this point you will see the shareable link for that file. Here is what that link will look like: https://drive.google.com/file/d/
0ByYVu2aiDQ0SMDcyaFFZa0NjUjg
/view?usp=sharing
Copy the ID (the part of your link that’s like the bolded part, above) in a separate text document.
Append that ID to the following url to preview serve you document in any browser. www.googledrive.com/host/[ID] (replace [ID] with your file ID).
What is really cool about this, is that if you later make a change to the document, publish again and refresh your browser, you will now see the changes to your document. Publish to Drive will always override your existing content unless you specify a different location.
3. BYOC
Bring (build) your own component. In Google Web Designer we try to have good set of built-in components. Some of those components are generic yet they do allow a bit of customization. As we continue building components and improving the existing ones, we also want to make sure users can have access to tailored components. To ensure this, we have added the ability to add your own components to Google Web Designer. The best part of this feature is that each custom component is packaged in a zip file, which can easily be shared. Once imported the custom components will behave just like one of the native components.
You can add a custom component by simply clicking on the ‘+’ button in the component panel and select the .zip file that contains your custom component. Once you drag and drop the component on stage, it is added to the document and can immediately be used. A custom component can also specify any number of external dependencies in the component manifest, which will be automatically imported into your document.
For more information on custom components, visit this link:
Building a custom component
.
4. Custom swatches
Having a great color palette often makes a big impact when creating rich content. Google Web Designer’s color panel enables the user to pick a large number of default colors, create new colors and design complex gradients.
The really cool part about creating gradients or custom colors is the ability to save it as a custom swatch. If you click on the swatches tab, you will see the list of default colors, and at the end of the list is a ‘+’ icon. A click on that icon will save the currently selected color or gradient as a custom swatch.
5. Groups
Last but not least is Google Web Designer’s Group feature. Grouping allows you to create reusable objects that can be placed in a document, much like components. The benefit of groups is that any changes made to the group will be reflected every place the group is used. This eliminates the need to copy and paste, which also provides the added benefit of a smaller file size since we only need to store one instance. When publishing a document you will have the option to ‘unpack’ all instances which will replace those instances with the actual content of the group. Or you can decide to have this replacement done at runtime, which will decrease the file size as well.
Another great benefit of groups is that when there are no instances in your document, groups are stored in a separate companion file. This means that they will not count towards your total file size! In other words you don’t have to remove unused groups as long as no instances are placed in your document.
Groups will also encapsulate animations. When you create a group from elements that are animated, those animations are now part of your groups. Any instances placed on stage will animate relative to where they are positioned.
Finally groups can be used to create dynamic galleries which can have multiple elements in each frame instead of a single image. For more info on dynamic galleries visit this link:
Dynamic galleries
So there you have it, a few of our top features for you to try. I hope you found this useful and please let us know what you think in the comments or feel free to write in about your favorite features!
Posted by Valerio, UX Engineer
Interactive Design with CSS and Events
Monday, April 4, 2016
Introduction
One of Google Web Designer’s strengths is that it allows for content creation without requiring users to be seasoned coders. With a few clicks, drags and keypresses you can create an animated and event-driven HTML5 experience without any hand-coding at all.
While the usefulness of visual authoring is obvious, the web platform is powerful and ever growing; so knowing a bit of CSS and JavaScript can give you a valuable toolset in creating engaging online experiences.
In this article, we’ll observe some of the CSS created when authoring a transition effect and combine it with a small amount of JavaScript to have tighter control of the visual state of elements. Some basic understanding of HTML and CSS is assumed.
The Design
For the design, our goal is to create an HTML “ferris wheel” effect by using Web Designer’s three-dimensional transformation tools, the Timeline and the CSS Panels, among other key features. For now, we’ll be rotating simple text elements.We’ll also want to control the animation playback using triggering element.
Let’s start by creating the text elements, adjusting their font styles and position, and adding rotational animation.
Create Text Elements
Using the Text Tool, click near the top of the stage to create a paragraph element and type some text. Our design involves presenting a list of 4 destinations, so let’s type “San Francisco” as our first destination.
In the CSS Panel, you’ll notice a rule was created to apply styles to your text element -- it should have a selector reading something like “.
gwd-p-1234
”. This selector might seem like gibberish to you, and well, you’d be right. This is because Web Designer doesn’t know what you plan to use the CSS rule for, so it assigns a generic selector. Updating these selectors to be more meaningful will make your code easier to read and understand.
With the CSS Panel open, click on the selector to activate it for edits. Change the selector to ‘
.label
’. Next, use the Text Tool’s toolbar to set the font family, font size and color to your preference. I’ve chosen large, light text using the Google Font “Luckiest Guy”.
Now, switch over to the Selection Tool, copy/paste the current selection and drag downward (or hold Shift+Down Arrow) to move the copy directly below the original. Switch back to the Text Tool and change the label’s text to something new (e.g. “Mountain View”).
Hit Ctrl+A (or Command+A on OS X) to select both paragraphs, right-click either one and select “Wrap” from the context menu. This will create a DIV to surround our two paragraphs. Feel free to update the generated CSS rule selector to something meaningful for added maintainability (keeping with the wheel analogy, I’ve chosen “
.spoke
” for my selector). While we’re at it, right-click and again select “Wrap” from the menu, this time changing the generated CSS selector to “
.wheel
”. Our “wheel” will eventually contain multiple “spokes”, but we’ll get to that later.
Animate the container
Now that we have a bit of content, let’s work on our animation. We’ve already wrapped our text elements in a DIV, so rotating that DIV should spin the inner text elements on the correct path. With the outer element selected (the one using the selector “
.wheel
”), use the Timeline to set a keyframe at 1 second. You can apply rotation at that keyframe by either using the 3D Object Rotate Tool or the Properties Panel. Since we know the exact values to enter (
360 degrees
of rotation along the X-axis), using the Properties Panel here is a more efficient workflow.
We’ll want this animation to loop indefinitely, so use the animation repeat control on the appropriate Timeline track to set animation looping to “Infinite”.
An unexpected twist
A handy feature of Web Designer’s Timeline is animation scrubbing. Click and drag the Timeline’s tick marker back and forth to get a preview of our newly created animation. You’ll notice our “ferris wheel” is behaving a bit unexpectedly. While the path of rotation is what we want, the text labels do not remain upright -- a desired quality in both textual labels and ferris wheel cars.
To ensure the text remains legible, we’ll add a counter-rotation animation to our labels.
Apply counter-rotation animation
With the Selection Tool activated, double-click the “spoke” element. This changes the drawing container and allows us to access our label elements once again for editing. For each label, add a keyframe at 1s in its Timeline, and set the X-axis rotation at that keyframe to
-360 degrees
using the Properties Panel.
The animations should also have looping set to “Infinite.” Another pass at scrubbing the Timeline animation should yield much better results.
Adding another “spoke”
The design calls for 4 destinations to be listed, so naturally, we’ll add another “spoke” to the wheel. We can do this quickly by copying and pasting the existing spoke element (containing two labels). The second spoke is now laying on top of the first, but it should really intersect it at the center. We can achieve this by rotating it about its X-axis by
90 degrees
.
You’ll notice the pasted element will already have animations listed in the Timeline. These are the copies of the original counter-rotation animation we used for the first set of labels, but now we must update them to make up for the fact that they are rotated an additional 90 degrees. For each of these two labels, set X-axis rotation in the first keyframe to
270 degrees
and
-90 degrees
in the last. Next, use the Text Tool to update the strings within the new labels. I’m sticking to California cities, and so let’s add “Monterey” and “Santa Barbara”.
NOTE! You may find it easier to edit your text by temporarily rotating the stage to get a better view. To do this, select the 3D Stage Rotate Tool and click and drag a point on stage around to get a different perspective.
The Text Tool allows for editing in 3D. Use the 3D Stage Rotate Tool to get a better angle for your edits.
Adding an animation control
To control the animation, we’ll add another text element (using the Text Tool) to serve as a button. Since this control will toggle playback, type “Toggle” as the content of your text element. In the Properties Panel, assign an ID attribute; ID’s are needed on target elements before using Web Designer’s event listening feature.
After assigning the ID, right-click the new element and select “
Add event…
” to launch the Events Dialog. Select
Mouse > Click, Timeline > Toggle Play
, select your current page and click
Save
. You should now notice this new event configuration listed in the Events Panel.
Final steps
So far, we’ve create an HTML structure that allows us to apply a rotation to invoke a spinning wheel effect. We’ve also wired an event listener a toggle button using the Events Dialog to pause and resume animation playback on the user’s demand. Let’s see if it works!
To see your design working in a browser, click the
Preview
button and select your preferred browser. Test out the toggle button. What do you see?
You should notice that pausing the animation using the button only affects the top-level animation -- the labels continue to rotate along their X-axis:
To fix this, let’s jump into Code View and take a closer look at our CSS.
In Code View, find a block of CSS resembling the following:
#page1.gwd-pause-animation .gwd-gen-1cvqgwdanimation {
animation-play-state: paused !important;
}
This CSS rule relies on the class “
gwd-pause-animation
” to be applied to the page’s root element in order to pause playback,
but only
for the top-level element. Change the code to the following to also target the animations on labels:
#page1.gwd-pause-animation .gwd-gen-1cvqgwdanimation,
#page1.gwd-pause-animation .label
{
animation-play-state: paused !important;
}
With the animation pausing rule modified, let’s give our toggle button another test run. Hit Preview one more time. The toggle button should now work!
Keep it rolling
In this exercise, you have successfully built a pausable, three-dimensional animation using JavaScript events and some custom CSS; techniques you can utilize to further enhance your animation projects! We’ve covered a lot of ground in this exercise, but this only scratches the surface of what is possible with Google Web Designer! Continue to follow along with us and let us know what you think in the blog comments!
Posted by Eric, UX Engineer
Using Pages with custom code in Google Web Designer
Monday, March 28, 2016
As you probably know, Google Web Designer has a Pages construct that can be used to create new scenes in your storyboard. No matter where you are in your creative, you can add a new page to create additional functionality.
In this article we’ll have a look at two unique use cases where pages can be used; to repeat animation sequences, and to enforce polite loading of assets.
Looping between animation sequences
Let’s assume we have this storyboard:
In this storyboard, we want to transition 3 times between sequence A and B, and after that we move to sequence C, where we place our call to action.
There are a few ways we can achieve this. One way is to create a full length animation in one continuous timeline, recreating the A to B animation 3 times, and then transition to the part C of our storyline. While this will work, we’ll need to create and manage a lot of layers and animations keypoints, which is not ideal.
Another way would be to create 7 different pages, and recreate the same animation on pages 1,3,5 and 2,4,6. Then we’d need to add an event on each page to move to the next one. While this is better than the previous solution, it still creates a lot of unnecessary duplication.
A much cleaner way to handle this storyboard would be to use three pages, one for each sequence, and loop between the pages using some custom code. So let’s get started:
First, create a new Ad, and add 2 new pages. You should have now 3 pages – in this example we’ll call them pages A, B and C.
While staying on page A, we’ll create the global variables that we will use to control how many times to repeat the transition between A and B. From the event panel, click the ‘+’ button, and add the following custom event:
Target: document.body
Event: Google Ad > Ad Initialized
Action: custom
Custom Code: see the image above
Create the animation you want on page A, then go to the end of the Event timeline and add an event by right-clicking. Double-click the event marker that you just added, and define a new event like this:
Target and Event are automatically detected after clicking the event marker in the timeline.
Action: Page Deck > Go to Page
Configuration: Page ID: Page B.
This will tell Google Web Designer to move to page B after animations on page A are finished.
Go to page B, and create the animation you want in this phase of your ad.
As you did for page A, go to the end of the timeline and add a new event by double-clicking on the Events timeline.
Create a new event, but this time, under Action, select “Add custom action” and add the following custom code:
Let’s have a look at the code:
gwd.currentLoop++;
if (gwd.currentLoop < gwd.totalLoops) {
//Loop the animation, and go to page A
document.querySelector('[is="gwd-pagedeck"]').goToPage('pageA');
} else {
//No more loop, go to page C
document.querySelector('[is="gwd-pagedeck"]').goToPage('pageC');
}
In the first line we are incrementing the variable currentLoop. This is how we note the completion of a new iteration of the loop A->B. In the “If” statement, we are checking to see if we’ve completed all the loops that we intended. If we have, we move to PageC, otherwise we move back to pageA.
This lets us create a complex animation with multiple sequences without a lot of duplication or unnecessary layers.
Postponing asset loading
Publisher’s specs can often have restrictions that limit the size of the assets. For example assets may be limited to 75kb for polite loading, animation may require user interaction, or the ad may have a maximum size of 10MB.
Google Web Designer already offers a ‘Polite Loading’ option in the publish window, but let’s take a look at using pages to give us more control of how the assets load.
Let’s assume we are creating a masthead ad, and we want to display a 10 second looped video, and then show a longer video on user interaction (such as a rollover). The publisher specs for this campaign require a maximum of 1.5 MB page load, with a maximum of 10MB after user interaction. Since you can’t load both the video on page load, what can we do? You got it, we are going to use two pages! We’ll place the 10 second video on the first page, and on the second we’ll put the full length video.
Did you know?
The resources on a page are loaded only when that page is displayed for the first time! This is a great way to load only the assets that you really need.
First, create an ad, then add a second page. Place the short video on the first page, and the longer video on the second. Then create a new event like this:
Target: document.body
Event: Ad.initialized
Action: custom
In the custom action, we are creating a new global variable that keeps track of the user interaction. We have set it to false as a starting state.
Now we’ll add a new event, this time choosing the video on the first page as the target, and for the event we select Mouse > mouseOver;
We are now changing the state of our global variable every time there is an user interaction (rollover) on the first video.
Finally, we need to add one last event:
Target: video on the first page
Event: Video > ended
Action: custom
The custom code we’re using looks like this:
if (gwd.userInteracted) {
document.querySelector('[is="gwd-pagedeck"]').goToPage('page1_1');
}
Here, we are checking to see if an interaction has happened, and when it has, we move to the second page.
In this example, we used three events to avoid jumping directly to page2 after the user interaction; we wanted to be sure that the video on page 1 had played completely. This way we can create a seamless transition between the 2 videos, giving the impression of a single video.
I hope these examples inspire you to think about what you can do using pages together with some simple custom events. Give it a try, and let us know what you think.
Posted by Nicola, Software Engineer
Helping developers bring their creative vision to life
Monday, March 21, 2016
Over the past two years, we’ve focused on building Google Web Designer into a comprehensive HTML5 authoring tool that every developer would want in a toolkit. We heard from developers and evolved the product to suit their needs, building sleek animation features, hand-editable code, direct integration into ad servers (AdWords and DoubleClick,) and recently, a new intuitive
dynamic creative workflow
.
With these features in place, we wanted to test the capabilities of the product. We challenged an internal team of designers and developers to build an ad with all the beautiful, interactive capabilities that an advertiser expects, using only Google Web Designer. Using imagery from the Google Cultural Institute’s World Wonders collection, the team came up with the following:
We interviewed Tristan, the lead developer of the creative, to discuss some of the challenges designers face while using ad creation tools and he was very enthusiastic about how Google Web Designer has made his life simpler.
How would you rate Google Web Designer’s ability to help hand-coders who don’t like to use similar products?
Google Web Designer passes the most difficult test of any visual development environment: it respectfully gets out of your way when you prefer to assemble things by hand.
Is working with external libraries using Google Web Designer still a problem?
I can easily build on Google Web Designer's component library using jQuery and the GreenSock Animation Platform (GSAP) to customize and display items however I wish. I push them onto the screen, I slide them them off. I switch videos on, then I silence them again.
Manipulating animations with less development time is the biggest challenge for developers. How did you approach this while using only Google Web Designer?
Instead of building animations inside the timeline, I can use GSAP to rotate HTML elements in 3D, twirl them around to reveal secondary content, and stagger movement for visual clarity. When handling dynamic content, these techniques are invaluable.
How easy/difficult is it to use for a novice developer?
Google Web Designer provides a number of components which require no advanced API knowledge whatsoever. I can display a client's video playlist straight from YouTube. I can assemble swipeable product galleries with dot navigation. I can display a map with custom pins dropped at nearby retail locations. Any one of these things by itself is something a client would love to see in their lightbox unit.
The Google Cultural Institute lightbox unit imagines a very simple menuing system. It's a starting point. Behind the scenes, this piece illustrates how programmers and designers alike can seamlessly blend components with custom code to produce beautiful work quickly.
Want to know how Tristan and team built the ad?
Download the source code here to know more!
Posted by Tristan, Sales Animation Interactive Designer
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
