Jump to content
GreenSock

maurizio

Folding/Unfolding animation

Go to solution Solved by maurizio,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

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?

http://codepen.io/GreenSock/pen/eZprNG

  • Like 2
Link to comment
Share on other sites

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

 

Look what you done did!!! It just magically teleports around Chrome on Win10

 

bOjo2ZP.png

Link to comment
Share on other sites

Sometimes it works like your video, but after a couple of tries it seems to just start glitching out, appearing in different locations and as different shapes. I don't think I've ever seen that type of behavior before.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×