Web Designer Blog
The latest news and tips from the Google Web Designer team
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
Labels
animation
animations
BYOC
carousel
clips
css
CTA
custom code
Display
DoubleClick Bid Manager
DoubleClick Studio
dynamic
engagement ads
events
exit
fluid layout
gallery
google cultural institute
google web designer
groups
HTML5
javascript
lightbox
looping
masking
new release
new version
pages
publish
responsive
sales animation
swatches
swipeable
text
UI
Archive
2017
April
March
2016
November
June
May
April
Popular Questions from the Google Web Designer For...
Exploring gallery components in Google Web Designe...
Five features to explore in Google Web Designer
Interactive Design with CSS and Events
March
February
Feed
Follow @googlewdesigner
