Translation- rotation bug

[marijana...@campanda.com]

Hello,

I've been trying to make an animation rotating an image around its Y axis, something like a flip. I've done this last year and it worked but now, although I've read that in the latest update of GWD it should run smoothly, when I go to preview it's really buggy.

I am trying to flip an round image 360 degrees and I just get halves of the round visible.

Any idea what I might be doing wrong?

Thank you,
marijana

[Google Web Designer beta]

Hi,

Thanks for using Google Web Designer.

Do you have any background element behind the element that rotates around Y axis?

This might be causing the halves of the round visible issue.

Other than that, if you use transform:rotateY() in keyframes, and not mixing with top and left, or width and height properties changes in keyframes, the animation should be smooth.

Please send us your source files, if you like.

Thanks,

Mariko (GWD team) 

[marijana...@campanda.com]

I do have a background image :/ Is there a way to keep it and the rotation?
And is it also possible to flip the image and then scale it?

I'm sending you the files, maybe it will be more clear.

Thank you!

[Google Web Designer beta]

Hi Marijana

I modified your source file and please take a look.

Basically, when there is 3d rotation and there is a background. We need to tweak Z value so that the elements with 3d always appears on top of the background.

I added translate3d() in Z values to each keyframe for "circle" div so it will stay on top of background. Some browser may render this differently, so please check.

Other thing to add "scale" in keyframes, I added scale3d(1.1, 1.1,1.1) for the last keyframe of "circle" image. You can also tweak the value from Properties Panel as you select each keyframe.

Please let me know if that works for you,

Thanks,

Mariko(GWD team)

[marijana...@campanda.com]

Thank you, Mariko!

I can't see any elements when I open it in GWD, although I put it back in the same folder. But I see broken frames for the images so I can see the motion.
I can see what you did with the Z value so I will try a test one with that. When I did a banner without the background it was not an issue, so I see what you mean :)

BUT, now I have an even bigger bug, I can't start a new file :/
is that a current bug or am I doing something wrong? this has never happened before, also on Friday I had this issue.

[Google Web Designer beta]

Hi marijana

Sorry about your issue where you can't start a new file...

Please try this. Close GWD, delete the cache, and relaunch GWD. The cache location is following,

Mac      /Users/<username>/Library/Application Support/Google/Web Designer/data/cache

Win       C:\Users\<your username>\AppData\Local\Google\Google Web Designer\data\cache

If that doesn't help, please delete the cache and re start your machine, then relaunch GWD.

Please let me know if that helps.

Thanks,

Mariko (GWD team)