How to Animate Ads Only on Mouseover

127 views
Skip to first unread message

joe.w...@gmail.com

unread,
May 29, 2018, 11:11:49 AM5/29/18
to Google Web Designer beta
I've created many animated ads with GWD, each with animations.

For digital portfolio purposes, I'd like the user to only see these animations when they hover over the ad. (And ideally stop when they mouseout.)

Is this doable? Perhaps with iframes? Let me know if I can offer any information. Thanks for your time! -J

P.S. Here's a rough example:

Mouseout: https://i.imgur.com/poBVlHp.png
Mouseover: https://i.imgur.com/0QeWYCb.png

San Khong

unread,
May 29, 2018, 1:10:13 PM5/29/18
to Google Web Designer beta
Hi Joe,

Note that mouseover and mouseout only work on desktop and not mobile.

You can achieve this by adding a pause event on the timeline so the animation will not start when the ad loads:
At the first keyframe in the timeline Advanced mode, right click and select Add event.
Select Timeline > pause for action and page1 as the Receiver and click OK at the Configuration.

Then add the mouseover event:
Deselect all elements or click on an empty area on stage.
In the Events panel, click the Plus button.
Select page1 for target, Mouse > mouseover for event, Timeline > play for action, page1 for receiver and click OK at the Configuration.

Now add the mouseout event to pause the animation again.
Deselect all elements or click on an empty area on stage.
In the Events panel, click the Plus button.
Select page1 for target, Mouse > mouseout for event, Timeline > pause for action, page1 for receiver and click OK at the Configuration.

Attached is the test file so you can check out the events.

Hope it helps.
San
Google Web Designer team
mouse.html
Reply all
Reply to author
Forward
0 new messages