Create animations

You can create animations in Google Web Designer in two modes, Quick mode and Advanced mode.

In Quick mode, you build your animation scene by scene: you add a new view of the entire page, change the elements you want to animate, and, optionally, modify your transition times and easings.

For more complex animation, Advanced mode lets you individually animate each of the the elements, optionally modifying transition times and easing as well. Advanced mode also shows layers, which let you change where each element is in the stack of elements.

Full 3D authoring environment

Create and manipulate 3D content utilizing an array of tools and the power of CSS3. Rotate objects and even 2D designs along any axis, visualizing 3D transformations and translations as you author.

Design view and code view

Code view lets you view and edit your code in Google Web Designer's built-in code editing tool. Code view lets you create CSS, JavaScript, and XML files. Code view uses code autocompletion which makes your code easier to write, with fewer errors.

For Ads and HTML files, you can switch between Code view and Design view, with the changes that you make to the code in Code view reflected in the Design view. This lets you immediately test how changes in your code will affect your designs.

You can also select objects with the selection tool and change the CSS styling for those objects in the CSS panel.

Illustration tools

Import assets from any other creative suite or use the built-in illustration tools to create vector-style artwork keeping your designs light. To create new HTML tags in your designs, just draw them in with the Tag tool.

The CSS panel lets you edit current styles, as well as add new CSS rules.

Easy ad workflow

Google Web Designer makes it simple to publish ads through any platform. Choose from DoubleClick Studio or AdMob, or go for the Generic option to push content through any other ad network. No coding required.

What's New:

Document Upgrade

Files created in previous builds will be upgraded when they are opened in Google Web Designer v1.1.1. The upgrade process seamlessly copies your old documents and converts the copy and all the assets into a v1.1 document. Your original document will remain in the older format and placed in the archive folder.

This file upgrade is necessary because:

  1. Google Web Designer no longer generates code for components. Component code now uses Web Components (CustomElements).
  2. Events are now supported for all elements, not just components.
  3. The CSS code generated by the Timeline is different from v1.
  4. The new version uses Project folders. A Google Web Designer document typically consists of the HTML markup, assets, Javascript files and CSS stylesheets. They are now bundled in a folder, which represents the Google Web Designer document.

Auto Update (Internet connection required)

If you have a previous version of Google Web Designer, it will be automatically updated to the latest version.

Important: Google Web Designer requires an internet connection to run the first time after installation.

What's New:

Components

  • externalScripts load before enabler/polymer
  • Implement getElementById in PageDeck
  • Support setting attributes and invoking methods on components that are not in the current page
  • [YouTube] Add cueOnly parameter
  • [YouTube] Add adformat attribute to gwd-youtube

Events

  • Expose Google Ad.exitOverride in the events dialog
  • Expose Ad initialized event for document.body target in the events dialog
  • Event action for setting YouTube component ID with invalid parameter type does not classify action as custom

Publish

  • [Publish to DoubleClick Studio] GWD should pass Interstitial Ad with expanding page as Mobile in-app format

Timeline

  • Performance issue when pasting multiple divs
  • Performance issue with multiple ad files with many layers open

Miscellaneous

  • A line of text disappears when you insert a space then click outside of the text box
  • Zoom tool doesn't have keyboard shortcuts to zoom in and out
  • Misleading comment in generated GWD code in handleDomContentLoaded function ( // * Set dynamic values for element attributes.)