Animation trouble in Safari. Element Flicker

896 views
Skip to first unread message

gdayby...@gmail.com

unread,
Jan 19, 2016, 11:58:03 AM1/19/16
to Google Web Designer beta
Hi there,

I'm using GWD to create some banners for a client of mine.

It seems to work just fine in chrome but on Safari one element start to flicker (while the other element is animated).

I'm not sure how to solve the problem. Attached the folder.

I read other topics but I could find any answer

Anyone know what to do?

gwd_preview_Adyen_300x250.zip

Google Web Designer beta

unread,
Jan 19, 2016, 6:30:28 PM1/19/16
to Google Web Designer beta
Hi,
Thank you for posting your source files.
I checked the browser preview on Chrome and Safari and I was not able to see what you described by flickering element.
On Chrome and Safari (v 9.0.2), the animation seems to play the same way. I wonder what I am missing there.

Could you explain in little more details how you see the flickering animation on the banner ad?

Thanks,
Mariko (GWD team)

gdayby...@gmail.com

unread,
Jan 20, 2016, 5:19:23 AM1/20/16
to Google Web Designer beta
Hey Mariko,

The headline "get paid" on the banner literally flicker when the "wheel with text" is spinning. Also my client see the flicker.

I also have on Safari 9.0.2

Attached a screen grab.

Thanks

banner_.mov

Google Web Designer beta

unread,
Jan 20, 2016, 12:12:28 PM1/20/16
to Google Web Designer beta
Hi,
Thanks for the video.
I see the flickering image on the video, but when I preview the source file attached, the "wheel with text" part is not showing or playing the wheel animation on the ad, so the "get paid" text does not flicker at all.

I wonder if the source file attached is missing something?
When I opened the file in GWD, there are only 4 layers, and no group in the Assets Library.

Could you try to open your source file again and save it and zip the whole project holder and send it to us?

Thanks,
Mariko (GWD team)

jmani...@gmail.com

unread,
Jan 20, 2016, 2:08:22 PM1/20/16
to Google Web Designer beta
I noticed that your animation is using both translate3d AND left/top values. This can cause flickering problems from what I have understood. If you're going to animate an element, use only translate3d, make sure the left/top values aren't changing.

l.sal...@moskitodesign.it

unread,
Mar 11, 2016, 11:34:13 AM3/11/16
to Google Web Designer beta
I'm having the same issue.
I can understand it's due to the use of the goToAndPlay method to loop animations, you can find a preview here:
http://ebay.moskitodesign.com/banners/VentaExpress_MediaCampaign/CashConverters_Comfort_728x90/index.html

You can notice the flickering whenever you hover the CTA

Do you know of a way to fix this? I wouldn't want to change the paradigm I used to loop and I don't want to renounce to that either.

Luca

Reply all
Reply to author
Forward
0 new messages