Flipping Cards

[Franz™]

Hi everybody!

Today I started using GWD for the first time, and it looks amazing! ;-)

Just to experiment, I was trying to create a flipping card like those shared by Google on Google+ (like this one). I created a colored square and then some text (a question), and grouped them together. Then I used the timeline, created the keyframes and used the 3D objects rotation tool to flip the card progressively in the different frames.

The question is: how do I set the back of the card with the answer, so that when the card flips you don't see the back of the first image, but another image with the answer?

I successful created a flipping card gif like this using Photoshop, where every level convert to a different frame, so after 90° flipping, I created a new level with the backside image, and the result was a front and back image card.

I don't know how to do this using GWD, because if I remove the frontside image to show the backside one, the first image disappears from all the keyframes. I attach the demo I created, where the card flipps but unfortunately doesn't show a different backside (also, the text flashes during the animation, but I solved this problem creating the card with text in Photoshop and then importing it in GWD).

Thank you for any suggestions!

Best,

Franz

[Jason Long]

Hi Franz

You can go back into the group and select the text.  In the Properties panel and under 3D postition and view, you'll see the XYZ value and the top row is for 3D translation.  Change the Z value to 1px, this will translate the text forward 1px in Z axis and this will do the trick.  I attached a screenshot. Let me know if this will help.

Thanks

Jason (GWD team)

[Franz™]

Hi Jason,

nice to meet you! ;-)

Thank you very much indeed for your help, the trick works!! I spent all the evening trying to create the "perfect card", and now I succeeded in creating the card only with GWD tools, without importing external images and creating the card only with a square and two text boxes at z=1px and z=-1px respectively (yes, it's no big deal, but it's a first step and I enjoyed doing it).

Thanks to your suggestion, now the text is correctly positioned on the front and back side and it doesn't flash while flipping. I attach the final result! :-)

PS: Are you going to add the possibility to export in other extensions, like gifs? It would be great to create animated gifs this way, GWD's animations are simple and amazing.

Thank you again for your help, enjoy your evening!

Franz

[Franz™]

PS: this is the link to see it in action online:

http://francescopergola.tk/golden-card-2/golden-card-2.html

It didn't work at first, and I found that AdBlock was blocking it. Is it normal? It's just an HTML file. Another thing: on Firefox the card doesn't flip, instead it works on Chrome and Safari.

[Jason Long]

Hi Franz

Yes, we noticed there is issue with 3D previewing in Firefox.  And about the AdBlock, you have to disable it in order for the ad to work. It's normal.

Thank you for using Google Web Designer