Web Designer Blog
The latest news and tips from the Google Web Designer team
Common animation topics from the Google Web Designer forum
Wednesday, June 8, 2016
Animation is a key element in most creatives made in Google Web Designer and our community forum is filled with interesting and complex topics on the subject. In this blog post, we will go over some common animation scenarios that are brought up in our forum, and provide workarounds to avoid these issues in creatives.
Animation goes behind other elements unexpectedly
Users have reported that some elements go behind other elements in animation on a browser preview. Let’s walk through the issue and try some potential solutions to the problem. Download
my_test.zip
to to see the actual example file.
To begin, we see a background gray image in a layer, and another image that shows 10 with a white background sitting on the top. 3D rotation animation is applied to the “10” image.
When you preview on a browser, the animation appears as this.
Approach 1 - Adjusting Z translation value for the background.
First, we want to make sure the rotating image is always above the background image. In order to do so, let’s move the gray background further behind by giving it a negative Z translation value in Properties Panel. When you change the Z value for the gray image, it appears smaller than the original image dimensions. To offset this, you can adjust the size of the image by using the Transform tool.
The “10” image should now be rotating in 3D on top of the gray background.
Please preview to ensure that the new adjustment of the 3D z value works on all browsers.
Approach 2 - Adjusting Z translation value for the element animated in 3D.
You can also adjust z translation value for the animated element to make it stay on top of other elements. If approach 1 doesn’t fix the issue, or the background image can not be altered for some reason, please try this approach.
In this example, select each keyframe for the image “10”, then add 110px of Z translation for all the keyframes. This will make the image appear larger than the original dimensions. To fix that, try adjusting the 3D scaling for each keyframe to a value that’s less than one, like 0.93. You may have to test different values to find out what works best for your animation.
Animation overlaps
We have heard occasionally that the elements on animation overlap each other when previewed on Safari even though they are laid out correctly in timeline and previewed correctly on the stage, or browser. This can happen when animation delays and ‘Pause’ events are used in the timeline.
To explore, let’s create an animation that shows “Yea” in a text box first, then pauses it. When a page background, a white background is clicked, the timeline starts playing to show ”Nay” text as “Yea” goes away. Download
test-overlap.zip
to see to see the actual example file.
When it is previewed on Chrome browser, it shows as this:
If you preview this on Safari, when the animation is paused, Nay is already displayed and overlapping with Yea before any user interaction happens.
Let’s try to resolve this overlap.
Approach - Removing the animation delays
When the overlap happens, let’s remove the animation delays for all the animated layers. In order to do so, 1) Move the playhead all the way back to 0.1s., 2) Select all the layers that have animation delays, 3) Hit F6 function key to add keyframes, 4) Move the keyframes to 0 until they appear as half diamond shapes.
This should fix the overlapping preview issue on Safari. After adjusting the animations, please test on all the browsers to verify adjustment works on all.
Page animation control
Many users have asked how to play the animation through pages, then make it go back to the first page and pause the animation at a certain point. It would also be great if we could control how long the animation plays and then pauses.
Let’s say you wanted to set up three pages in your creative and play the animation in the following page order. You want each page to play the animation for 2sec, then go to the next page until all the pages are cycled through twice.
Page 1
Page 2
Page 3
Page 1
Page 2
Page 3
Page 1 (end)
Approach - setTimeout event as a custom action
We can achieve this by adding a ‘setTimeout’ event for the timeline. Let’s walk through this process by using this example file
pages.zip
. Please download it and open pages.html file.
The example file is a three page ad file that has timeline animation on each page. Once you’ve downloaded it, preview it in your browser to see how it works. Now let’s look at the details.
On page1 we’ve added an event marker at 2 second mark to go to next page, page1_1. We’ve also added a timeline label “end” where we would like to end the whole animation after it’s gone through the page changes two times.
If you look at the events panel, the event that changes the page is shown as page1>event-1>GotoPage>pagedeck(page1_1)
Let’s take a look at the second page (page1_1) which is similar. Again, there is animation in the timeline and a timeline event marker added at the 2 second mark. If you look at the events panel, this event is displayed as page1_1>event-2>GotoPage>pagedeck(page1_2). When the animation plays on this page, it simply executes the timeline event at 2 seconds and goes to the next page.
Finally, let’s open the last page (page1_2). This is where we’ve added a custom action to control how long the animation plays until the ‘gotoAndPause’ event gets fired.
If we look at the timeline on page3, we see an event marker at the 2 second mark, just like the other pages. In the Events panel, you can see that there are two events associated with event three. The first has a custom action.
Note: 6000ms = 6s
We’ve added “setTimeout” as a function name, and created the following code:
setTimeout(nextPage, 6000);
function nextPage() {
gwd.actions.timeline.gotoAndPause('page1', 'end');
}
When this event gets fired, it will trigger a 6 second timeout, and then the page will go to ‘end’ label on ‘page1’ and pause the animation there. This six seconds represents the time it will take for the animation to cycle through another time. If we wanted the animation to cycle through the 3 pages three times, we’d have to set the timer to 12 seconds.
If you look at the events panel, you can see that there’s a second event attatched to event-3: page1_2>event-3>GotoPage>pagedeck(page1). This simply makes the page go back to the first page. It is important to remember that ‘setTimeout’ event has to be added before ‘GotoPage’ event, because ‘setTimeout’ should be executed before the page goes to the next page.
Now we can see how it works. Each page plays the animation for 2 sec and goes to the next page.On page 3 (page1_2), ‘setTimeout’ event gets fired, and the animation then continues to play normally for 6 seconds, when it then goes to the label “end” on page1 and pauses the animation there. As a result, all the pages are cycled through twice and the animation ends at the label “end”.
Using custom actions like this example will give you more control over your creative and its interactive content. Custom actions are saved in your file and you can reuse them for other elements if you like.
Final Thoughts
As developers we understand that it can be frustrating to deal with small differences and rendering issues on different browsers, platforms and devices. The Google Web designer team is working hard to solve those from the authoring side as we continue to release new feature enhancements. Please be sure to download the zip files and try the techniques in this article. We would also like to hear from you, so please send us your feedback and issue reports in our community forum!
Posted by Mariko, Test 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
2017
December
April
March
2016
November
June
Common animation topics from the Google Web Design...
May
April
March
February
Feed
Follow @googlewdesigner
