Google Web Designer Blog: Interactive Design with CSS and Events

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 The Design

Create Text Elements gwd-p-1234.label

.spoke.wheel
Animate the container .wheel360 degrees

An unexpected twist

Apply counter-rotation animation -360 degrees

Adding another “spoke” 90 degrees270 degrees-90 degrees
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

Add event…Mouse > Click, Timeline > Toggle PlaySave Final stepsPreview

To fix this, let’s jump into Code View and take a closer look at our CSS.animation-play-state: paused !important;gwd-pause-animationbut only#page1.gwd-pause-animation .label Keep it rolling Posted by Eric, UX Engineer

Google

2 comments :

juliettemylaJune 12, 2024 at 2:27 AM
This comment has been removed by the author.
ReplyDelete
Replies
OsizOctober 28, 2025 at 3:38 AM

Nice Blog!
Thanks for sharing this information.
Check our website:
NFT Marketplace Development
ReplyDelete
Replies

Add comment

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

Feed

Company-wide

Official Google Blog
Public Policy Blog
Research Blog

Products

DoubleClick Blog
AdWords Blog
Chrome Blog

Developers

Developers Blog
Ads Developer Blog
HTML5 Rocks Blog

Google
Privacy
Terms