Tutorial Tuesday: Bring your creative to life with Google Web Designer’s animation tools

Last week, we launched our “Tutorial Tuesday” series where we’ll be writing about important aspects of Google Web Designer throughout the month of October. Our first post helped you learn the Google Web Designer Interface, and this week, you’ll learn how to make your creative come to life with motion. 

While static images work fine for highway billboards, digital creative is most effective with animation. Google Web Designer provides two ways for you to animate your creative: Quick Mode and Advanced Mode.

1) Quick Mode is the easy way to get started with animations. In this mode, you build animations scene by scene by adding a new view of the entire page, animating your elements, and then modifying your transition times and easings. Learn more>>

2) Advanced Mode gives you more granular control of your animations. In this mode, you use the Timeline to animate your elements individually and then modify transition times and easings. Since layers are shown in this mode, you can easily change the location of each element within the stack of elements. Learn More>>




Can’t wait until next Tuesday?
In our next Tutorial Tuesday post, we’ll talk about how to create and manipulate 3D content with CSS. If you want to get ahead of the game, you can watch our CSS Panel Demo video or our other videos on YouTube.

Join the conversation
As always, please send us feedback on our user forum or our Google+ page. We’d love to hear what you have to say, so we can continue to improve Google Web Designer.

Posted by Jasmine Rogers, Program Manager, Google Web Designer