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.Read More

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:

1. Select the first keyframe/thumbnail in the animation. 
2. Add the new element at the first keyframe/thumbnail. 
3. Select the element at the first keyframe/thumbnail and use the Properties panel to set its opacity to 0. 
4. 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. 
5. Add another keyframe right before time t (let’s call it time t’) and set the duration between t’ and t to 0.01s. 
6. Select the element at time t and set its opacity to 1. 
7. 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:

1. 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). 
2. Select ‘bluediv’ in the first keyframe and open the CSS panel. 
3. Add the style: visibility: hidden
   
4.  Switch the Timeline to Advanced mode. 
5. 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. 
   
6. 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. 
7. 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.

1. 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>
2. Now let’s switch back to Design view and add a DIV element using the Tag tool. 
3. We’ll then use the Properties panel to set a background color on it, in this example let’s use blue. 
4. Once the color is set, we’ll also use the Properties panel to set the id to ‘bluediv’. 
5. Next, Right-click on the element and select “Add event…” to bring up the Events dialog. 
6. 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

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.Read More

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

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.Read More

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:

1. Start by creating a document and when you are ready to publish, select ‘Publish to Google Drive”. 
2. Enter your Google credentials. 
3. Leave the default options in the publish dialog, and click on Publish. 
4. Once publish is completed, you can now open your browser and navigate to: drive.google.com 
5. At the top of your list of files (if you sort by date) you should see a new folder named after your document. 
6. Right click on that folder and select ‘Share…’ 
7. Click on get shareable link which enables link sharing on that folder.
   
    
8. Now double click that folder to go inside of it. You should now see your published files. 
9. Right click on index.html and again click on ‘Share…’ 
10. 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 
11. Copy the ID (the part of your link that’s like the bolded part, above) in a separate text document. 
12. 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

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.Read More

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