Animations not working in Safari 9.0.2

416 views
Skip to first unread message

Josh Wachsman

unread,
Feb 22, 2016, 11:23:44 AM2/22/16
to Google Web Designer beta
I just built an ad in GWD and everything works fine in Chrome and Firefox, but not in Safari.  I've searched for answers within this group, but none seem to address this issue currently.  Any help would be great.  I've attached the unpublished zip file for reference.  Thank you!
300x250.zip

Josh Wachsman

unread,
Feb 22, 2016, 11:30:40 AM2/22/16
to Google Web Designer beta
Sorry, I should have been more specific.  The animations not working properly are the box flips.

Mariko Ogawa

unread,
Feb 22, 2016, 12:27:05 PM2/22/16
to Google Web Designer beta
Hello Josh,

Thanks for using GWD.
We are aware of this 3d animation issue when you apply 3d animation with a background. It is more obvious to see the z rendering issue in Safari browser.

To workaround this, I added negative z values for translation for all four background images (frame4bg, frame3bg, frame2bg and frame1bg).

Please take a look at the attached file and play with values for Z translation. To do this, please select the very first keyframe of each layer  (frame4bg, frame3bg, frame2bg and frame1bg), then from Properties Panel, change Z(negative px values) for Translation.
In this way, the box flipping animation won't go behind the background images. 

Please let me know if you have any question,

Thanks,
Mariko (GWD team)

300x250Modified.html

Josh Wachsman

unread,
Feb 22, 2016, 12:57:47 PM2/22/16
to Google Web Designer beta
Mariko:

Thank you!  That definitely did the trick.  However, there's now a thick border around the ad that wasn't there before.  Can you tell me where that's coming from so I can remove it?  This is for the company I work for so I need it to look as it did when I originally attached it.  But thank you once again for helping me with the flip issue!

Mariko Ogawa

unread,
Feb 22, 2016, 1:13:24 PM2/22/16
to Google Web Designer beta
Hi, Josh,

Yes, so now the background images appear smaller and won't fill the banner size because negative Z translation values are applied, there is a gap between an image and the logoAndShadowm which looks like a border.
So, i would suggest changing scale values to each image. (aprx. 1.04)
With the same way adding the z translation for the first keyframe, add xyz (unified) scaling (1.04) to 4 background layers on the first keyframe. 
I hope this works for you, please take a look at the attached file.

Thanks,
Mariko (GWD team)



300x250Modified.html

Josh Wachsman

unread,
Feb 22, 2016, 1:36:35 PM2/22/16
to Google Web Designer beta
Mariko:

I'll run with your suggestion and see where it gets me.  I appreciate the quick responses to my questions.  I'll be in touch to let you know if it works.  Thanks again!

Josh Wachsman

unread,
Feb 22, 2016, 3:17:52 PM2/22/16
to Google Web Designer beta
Your suggestion worked perfectly!!  Thanks again Mariko!  You rock!
Reply all
Reply to author
Forward
This conversation is locked
You cannot reply and perform actions on locked conversations.
0 new messages