Web Designer Blog
The latest news and tips from the 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
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
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
