Web Designer Blog
The latest news and tips from the Google Web Designer team
Interactive Design with CSS and Events
Monday, April 4, 2016
Introduction
One of Google Web Designer’s strengths is that it allows for content creation without requiring users to be seasoned coders. With a few clicks, drags and keypresses you can create an animated and event-driven HTML5 experience without any hand-coding at all.
While the usefulness of visual authoring is obvious, the web platform is powerful and ever growing; so knowing a bit of CSS and JavaScript can give you a valuable toolset in creating engaging online experiences.
In this article, we’ll observe some of the CSS created when authoring a transition effect and combine it with a small amount of JavaScript to have tighter control of the visual state of elements. Some basic understanding of HTML and CSS is assumed.
The Design
For the design, our goal is to create an HTML “ferris wheel” effect by using Web Designer’s three-dimensional transformation tools, the Timeline and the CSS Panels, among other key features. For now, we’ll be rotating simple text elements.We’ll also want to control the animation playback using triggering element.
Let’s start by creating the text elements, adjusting their font styles and position, and adding rotational animation.
Create Text Elements
Using the Text Tool, click near the top of the stage to create a paragraph element and type some text. Our design involves presenting a list of 4 destinations, so let’s type “San Francisco” as our first destination.
In the CSS Panel, you’ll notice a rule was created to apply styles to your text element -- it should have a selector reading something like “.
gwd-p-1234
”. This selector might seem like gibberish to you, and well, you’d be right. This is because Web Designer doesn’t know what you plan to use the CSS rule for, so it assigns a generic selector. Updating these selectors to be more meaningful will make your code easier to read and understand.
With the CSS Panel open, click on the selector to activate it for edits. Change the selector to ‘
.label
’. Next, use the Text Tool’s toolbar to set the font family, font size and color to your preference. I’ve chosen large, light text using the Google Font “Luckiest Guy”.
Now, switch over to the Selection Tool, copy/paste the current selection and drag downward (or hold Shift+Down Arrow) to move the copy directly below the original. Switch back to the Text Tool and change the label’s text to something new (e.g. “Mountain View”).
Hit Ctrl+A (or Command+A on OS X) to select both paragraphs, right-click either one and select “Wrap” from the context menu. This will create a DIV to surround our two paragraphs. Feel free to update the generated CSS rule selector to something meaningful for added maintainability (keeping with the wheel analogy, I’ve chosen “
.spoke
” for my selector). While we’re at it, right-click and again select “Wrap” from the menu, this time changing the generated CSS selector to “
.wheel
”. Our “wheel” will eventually contain multiple “spokes”, but we’ll get to that later.
Animate the container
Now that we have a bit of content, let’s work on our animation. We’ve already wrapped our text elements in a DIV, so rotating that DIV should spin the inner text elements on the correct path. With the outer element selected (the one using the selector “
.wheel
”), use the Timeline to set a keyframe at 1 second. You can apply rotation at that keyframe by either using the 3D Object Rotate Tool or the Properties Panel. Since we know the exact values to enter (
360 degrees
of rotation along the X-axis), using the Properties Panel here is a more efficient workflow.
We’ll want this animation to loop indefinitely, so use the animation repeat control on the appropriate Timeline track to set animation looping to “Infinite”.
An unexpected twist
A handy feature of Web Designer’s Timeline is animation scrubbing. Click and drag the Timeline’s tick marker back and forth to get a preview of our newly created animation. You’ll notice our “ferris wheel” is behaving a bit unexpectedly. While the path of rotation is what we want, the text labels do not remain upright -- a desired quality in both textual labels and ferris wheel cars.
To ensure the text remains legible, we’ll add a counter-rotation animation to our labels.
Apply counter-rotation animation
With the Selection Tool activated, double-click the “spoke” element. This changes the drawing container and allows us to access our label elements once again for editing. For each label, add a keyframe at 1s in its Timeline, and set the X-axis rotation at that keyframe to
-360 degrees
using the Properties Panel.
The animations should also have looping set to “Infinite.” Another pass at scrubbing the Timeline animation should yield much better results.
Adding another “spoke”
The design calls for 4 destinations to be listed, so naturally, we’ll add another “spoke” to the wheel. We can do this quickly by copying and pasting the existing spoke element (containing two labels). The second spoke is now laying on top of the first, but it should really intersect it at the center. We can achieve this by rotating it about its X-axis by
90 degrees
.
You’ll notice the pasted element will already have animations listed in the Timeline. These are the copies of the original counter-rotation animation we used for the first set of labels, but now we must update them to make up for the fact that they are rotated an additional 90 degrees. For each of these two labels, set X-axis rotation in the first keyframe to
270 degrees
and
-90 degrees
in the last. Next, use the Text Tool to update the strings within the new labels. I’m sticking to California cities, and so let’s add “Monterey” and “Santa Barbara”.
NOTE! You may find it easier to edit your text by temporarily rotating the stage to get a better view. To do this, select the 3D Stage Rotate Tool and click and drag a point on stage around to get a different perspective.
The Text Tool allows for editing in 3D. Use the 3D Stage Rotate Tool to get a better angle for your edits.
Adding an animation control
To control the animation, we’ll add another text element (using the Text Tool) to serve as a button. Since this control will toggle playback, type “Toggle” as the content of your text element. In the Properties Panel, assign an ID attribute; ID’s are needed on target elements before using Web Designer’s event listening feature.
After assigning the ID, right-click the new element and select “
Add event…
” to launch the Events Dialog. Select
Mouse > Click, Timeline > Toggle Play
, select your current page and click
Save
. You should now notice this new event configuration listed in the Events Panel.
Final steps
So far, we’ve create an HTML structure that allows us to apply a rotation to invoke a spinning wheel effect. We’ve also wired an event listener a toggle button using the Events Dialog to pause and resume animation playback on the user’s demand. Let’s see if it works!
To see your design working in a browser, click the
Preview
button and select your preferred browser. Test out the toggle button. What do you see?
You should notice that pausing the animation using the button only affects the top-level animation -- the labels continue to rotate along their X-axis:
To fix this, let’s jump into Code View and take a closer look at our CSS.
In Code View, find a block of CSS resembling the following:
#page1.gwd-pause-animation .gwd-gen-1cvqgwdanimation {
animation-play-state: paused !important;
}
This CSS rule relies on the class “
gwd-pause-animation
” to be applied to the page’s root element in order to pause playback,
but only
for the top-level element. Change the code to the following to also target the animations on labels:
#page1.gwd-pause-animation .gwd-gen-1cvqgwdanimation,
#page1.gwd-pause-animation .label
{
animation-play-state: paused !important;
}
With the animation pausing rule modified, let’s give our toggle button another test run. Hit Preview one more time. The toggle button should now work!
Keep it rolling
In this exercise, you have successfully built a pausable, three-dimensional animation using JavaScript events and some custom CSS; techniques you can utilize to further enhance your animation projects! We’ve covered a lot of ground in this exercise, but this only scratches the surface of what is possible with Google Web Designer! Continue to follow along with us and let us know what you think in the blog comments!
Posted by Eric, 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
