FLIP plugin and 3D

[elegantseagulls]

Exploring the the FLIP plugin some more, and am wondering if it's possible to flip nicely from 3D transforms. Am also wondering why the image in my demo is being flipped vertically when clicked, when there is only a Y rotation on it.

 

Thanks for any insight.

See the Pen LYJawvq?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

[GreenSock]

Hey @elegantseagulls!

 

The first caveat in the docs: 

Quote

 

Caveats & Tips

• Flip does not accommodate 3D transforms (like rotationX, rotationY, or z).

 

It's already super complex to manage all the nested 2D transforms (which no other tool that I know of is capable of doing)...3D is exponentially more complex. 

 

[elegantseagulls]

Ugg right in the docs... I should know better! I was looking, but must have glassed over it cause I was hoping to achieve something pretty unique.

[GreenSock]

Ha ha. No worries. Yeah, sometimes you can do something fancy like removing the rotations, using Flip.fit() to get them sitting right on top of each other, then gsap.set() the 3D rotation back again and animate all those values back to 0 but it looks like you've got a complicated case where you're using wrapper elements with perspective and a perspective-origin and using two entirely different elements in different contexts, so definitely complicates things. 

 

Let us know if you need help with something. 👍

[elegantseagulls]

19 hours ago, GreenSock said:

using Flip.fit()

@GreenSock: Is there a way to exclude a transform style in FLIP? The issue I'm now bumping into is my intertia plugin is continuing to transform my FLIP-element's rotationY slightly as it decelerates... I was hoping setting FLIP to simple: true, or disabling draggable would fix, but it seems not to, can I manually set a parameter?

Here's the WIP... It's a bit more complex than my previous demo, but code should hopefully still be pretty easy to follow:

See the Pen LYJaLNx??editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

[GreenSock]

Sorry about the delay, @elegantseagulls! I knew this would take more brainpower and I was trying to pick off low-hanging fruit last week before diving into this and then the low-hanging fruit kept piling up and then I got sick. Ugh!

 

It looks like you did a nice job of getting a solution together that first animates the element to a flat/2D state and then uses Flip at that point. Nice. 

 

So the only challenge now is killing the inertia tween on that Draggable? You should be able to just kill() the tween like: 

drag[0].tween && drag[0].tween.kill();

See the Pen wvEVQjd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? I'm going to add code to the next release that automatically kills that tween if/when you disable() the Draggable instance.  

[elegantseagulls]

Exactly what I was looking for! Thanks!