maurizio

Hi again all, just to let you know that I did it! Thanks guys, here's the pen: http://codepen.io/mauriziovacca/pen/QyPxOm?editors=0010 Best!

Hi all, a minor update: I managed to partially animate the elements correctly, rotating them by 45 degree. Now I'm facing two new issues: how to complete the 90 degree rotation and then hide the element (the hide part is not actually a problem); how to "reverse" the animation and get back to the starting point; (after thinking about it for a while, I realised how to do this) Anyway, I get the whole idea of how it should work: the Container 1 should rotate by 90 degree, meanwhile the top border of the Container 2 should slide up while rotating itself by 90 degree as well. Best!

Hi Zach, thank you so much. With "upper border" I'm referring to the top border of the first element (the one with the light grey background). Now, what I'm trying to achieve, is to fold the elements keeping them connected while collapsing bottom to top. I'm not sure if it's clear what I've in mind, but this could be considered as a reference: http://felixniklas.com/paperfold/ Best!

Hi Carl, you're totally right. On Safari now the animation it doesn't snap anymore. I think it was a misconception by my side, thinking that I've also to revert the transformPerspective to 0 but it's not actually the case. I have to test it on other browsers, but it's definitely better. Thank you!

Hi all! I'm having several issues while attempting to develop a "paper-like" folding animation (like this one: http://codepen.io/rendro/pen/dxtHc). As you can see, in my pen the two parts split and that's because of the transformOrigin; if I switch the origins like below var $foldUpper = new TweenMax($upper, 0.5, { rotationX: "-45deg", transformPerspective: 2500, transformOrigin: "bottom center", transformStyle:"preserve-3d" }); var $foldLower = new TweenMax($lower, 0.5, { rotationX: "45deg", transformPerspective: 2500, transformOrigin:"top center", transformStyle:"preserve-3d" }); I can successfully folding keeping the elements together (since they fold using the center of the container as reference) but I also want to keep the upper border sticked to the top of the main container. The other issue I noticed is a strange "snap" (or lag) when I get back to the original position. Could you help me? Best Regards, Maurizio