Jump to content
Search Community

FLIP plugin and 3D

elegantseagulls test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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. 

 

  • Thanks 1
Link to comment
Share on other sites

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. ?

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.  

  • Like 1
  • Thanks 1
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.
×
×
  • Create New...