[Folding/Unfolding animation]

Hi again all,

 

just to let you know that I did it! Thanks guys, here's the pen: 

See the Pen QyPxOm?editors=0010 by mauriziovacca (@mauriziovacca) on CodePen

 

Best!

[Folding/Unfolding animation]

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:

1. how to complete the 90 degree rotation and then hide the element (the hide part is not actually a problem);
2. 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!

[Folding/Unfolding animation]

Hey mauriziovacca, and welcome.

 

Can you please explain what you mean when you refer to "the upper border"? I'm not sure which elements you're talking about.

 

Also, I'm not seeing any snap... Could you further explain how to recreate the issue?

 

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!

[Folding/Unfolding animation]

i was seeing the snap on Chrome (MAC).

I think it is somehow related to how you are using different transformPerspectives when opening and closing.

 

Does this look better?

See the Pen eZprNG by GreenSock (@GreenSock) on CodePen

 

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!

[Folding/Unfolding animation]

Hi all!

 

I'm having several issues while attempting to develop a "paper-like" folding animation (like this one: 

See the Pen dxtHc by rendro (@rendro) on CodePen

).

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

See the Pen QyPxOm by mauriziovacca (@mauriziovacca) on CodePen