Jump to content
GreenSock

Chromium

Flip plugin flex-direction jumps

Go to solution Solved by GreenSock,

Recommended Posts

So today I've had a use-case that seems to be perfect for the Flip plugin and so I started messing around with it but have been having a little bit of trouble getting it to work for a simple flex-direction toggle animation.

 

The problem can be seen in my CodePen; the animation is perfectly fine when going to flex-direction: column, but when going back (clicking the SVG again) there seems to be a jump/skip for the SVG element for some reason. Note that I have not employed the use of the absolute positioning for the animation because that does not seem like it would work for my case since the wrapping div is also resizing when the flex-direction changes.

See the Pen zYazowy by fuad-zeyad-tareq (@fuad-zeyad-tareq) on CodePen

Link to comment
Share on other sites

  • Solution

Yeah, absolute: true is for situations just like this (changing flex direction) because of the way browsers won't respect sizing in flex. Is there a reason you're doing multiple Flip calls simultaneously? Particularly when you're doing absolute: true, you should put that in one call because there's a lot of complexity involved in coordinating everything. Like it must go in a particular order to retain positioning/sizing. It has to know all the elements it's going to work with so that it can go from the deepest to the shallowest. 

 

I assume you wanted something like this?: 

 

See the Pen yLEXMeO?editors=1010 by GreenSock (@GreenSock) on CodePen

 

If you've got a container that you want to resize too but you don't want it to be position: absolute (to prevent layout collapsing), you can define a subset of the targets (excluding the container) as the absolute value (see the docs). Like absolute: "svg, span". 

 

I hope that helps.

  • Like 3
Link to comment
Share on other sites

Quote

Is there a reason you're doing multiple Flip calls simultaneously?

Haha I did not know I can get multiple elements' states in one Flip call.

 

Quote

If you've got a container that you want to resize too but you don't want it to be position: absolute (to prevent layout collapsing), you can define a subset of the targets (excluding the container) as the absolute value (see the docs)

This did the trick!! I was avoiding absolute: true because it was affecting the wrapper which was affecting the page (but I still needed the wrapper included in the animation because of its background). Didn't realize I could just exclude the wrapper from being part of the "absolute animation". That's awesome flexibility!!

 

Thank you for your help as always! This might be my favorite voodoo magic plugin by the way!

 

However, I'm still having one more jump that seems to be happening in my project even after using absolute positioning for the animation. In my project I'm using an img element in place of the SVG, but I do not believe that is the reason for the issue. The first click works perfectly fine (the image enlarges to its full width as it moves to the center), but there's a "jump" (on the second click) when going back to flex-direction: row (the image "jumps" instead of animating back to its initial smaller size), it does still animate moving to the left though. I suspect this is an unavoidable layout collapsing issue (i.e. the layout collapsing will not wait for the image to animate back down to it's smaller size when the flex-direction changes) ?

Side note: If Flip can calculate everything behind the scenes and animate it for you, why would you ever not use it for layout changes that you want to be animated (outside of transition-based animations) ?

Link to comment
Share on other sites

7 hours ago, Chromium said:

However, I'm still having one more jump that seems to be happening in my project even after using absolute positioning for the animation. In my project I'm using an img element in place of the SVG, but I do not believe that is the reason for the issue. The first click works perfectly fine (the image enlarges to its full width as it moves to the center), but there's a "jump" (on the second click) when going back to flex-direction: row (the image "jumps" instead of animating back to its initial smaller size), it does still animate moving to the left though. I suspect this is an unavoidable layout collapsing issue (i.e. the layout collapsing will not wait for the image to animate back down to it's smaller size when the flex-direction changes) ?

Happy to take a look at a minimal demo. Without seeing that, I'm not really sure how to troubleshoot. It definitely shouldn't matter if it's using an <img> instead of <svg>. My guess is you didn't use absolute properly(?) 

 

7 hours ago, Chromium said:

This might be my favorite voodoo magic plugin by the way!

💚

 

7 hours ago, Chromium said:

Side note: If Flip can calculate everything behind the scenes and animate it for you, why would you ever not use it for layout changes that you want to be animated (outside of transition-based animations) ?

Hm, I'm not entirely sure I understand the question. I mean it is super useful in many situations. It's difficult to make sweeping statements like "always" without knowing some of the scenarios, but yeah the Flip technique is very powerful once you understand it. 👍

Link to comment
Share on other sites

I know we can provide the getState method multiple DOM elements (as you have shown in your example), but is it possible to provide that method multiple jQuery objects? I tried that in the CodePen below but "the jumps" make me think it didn't work (this may be related to my other problem). I've also tried putting the objects in an array but that didn't seem to stop the "jumps".

See the Pen jOKwRqO by fuad-zeyad-tareq (@fuad-zeyad-tareq) on CodePen



Never mind, putting them inside an array fixes that problem. Still trying to find out if I can demo my problem...

Link to comment
Share on other sites

Looks like you figured it out. Great. I'm not a jQuery guy, but it looks like there's also a $.merge() method: 

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

 

Yeah, if you've still got a problem, we'd be happy to look at a minimal demo

Link to comment
Share on other sites

Quote

My guess is you didn't use absolute properly(?)

My thoughts as well... because it works when I do absolute: true but then the layout collapses because the parent becomes absolute during animation I guess. I've tried absolute: [child, child], absolute: [parent, child, child], absolute: parent... I'm kind of guessing at this point.

 

This is a GIF of what's happening btw, it's not just my eyes, right? There's a little jump when it shrinks... it's skipping something.
uatGE26.gif

Perhaps you can help me understand, based on this GIF, exactly which elements' states would the Flip plugin need and which elements' need to be excluded from the absolute positioning during the animation? To give you an idea, this is the current element hierarchy in the GIF above:
 

Parent 1
  Parent 2
    Parent 3
      Parent 4 // This is the parent with the background (so it needs to be animated as well).
        Parent 5
          IMG WRAPPER
            IMG
          PARAGRAPH DIV

So my initial thoughts with this hierarchy would be to getState(Parent 4), absolute: Parent 5, and put nested: true (so that the animation would apply to its children as well)... but that didn't work (the IMG/Paragraph elements simply didn't animate).

Link to comment
Share on other sites

Yeah, we really need a minimal demo to be able to discern properly. My guess is that you want to make sure you're including the parent 4 (and maybe parent 5 and anything inside there) in your getState() and then set absolute: to the all the stuff INSIDE the Parent 5. DO NOT have the parent get set to absolute (otherwise your layout is collapsing). 

  • Like 1
Link to comment
Share on other sites

Hahaha thanks for bearing with me. Reading your last response and applying everything in it literally seems to finally have done the trick!

 

I guess what I struggled with the most is assuming that by including a parent (both in the getState and absolute), its children (and all their children, etc) would automatically be included in the animation as well. Essentially, for this to work, my getState had to have an array of every single element from Parent 4 and everything inside it (as you said),  while my absolute had an array of everything getState had minus Parent 4.

Thanks again for all your help. Love all the plugins you guys keep making that makes our lives so much easier and brings more life to websites! It's always fun animating with your library! 😁

I love that I didn't even need to do anything else for mobile, just added a max-height and Flip does the rest of the magic!

 

PS: Since a parent and its children are included in this case, it seems imperative to include nested: true, but oddly enough, adding/removing it doesn't seem to make a difference here (at least not visually).

Link to comment
Share on other sites

5 hours ago, Chromium said:

I guess what I struggled with the most is assuming that by including a parent (both in the getState and absolute), its children (and all their children, etc) would automatically be included in the animation as well.

No, that's not how Flip works. You need to tell it what to target. If we just automatically did all children of every element, that'd probably result in a ton of wasted processing. 

 

nested: true is typically only necessary if you're flipping both parents and children in a way that'd affect x/y positioning of the parent because moving a parent also affects the children too. If you're only resizing the parent, that's probably unnecessary. 

 

5 hours ago, Chromium said:

Thanks again for all your help. Love all the plugins you guys keep making that makes our lives so much easier and brings more life to websites! It's always fun animating with your library! 😁

I love that I didn't even need to do anything else for mobile, just added a max-height and Flip does the rest of the magic!

💚 Love hearing that. Thanks for being a Club GreenSock member - that's what makes all this possible. 

  • Like 1
Link to comment
Share on other sites

Hi again @GreenSock,

 

Follow-up question for you regarding this. After setting up my Flip animation how  you suggested, while the animation is working and running smoothly, I'm wondering how come it is not following the same order of animations when going back to the initial flex-direction (on the 2nd click). See the GIF example below:
uOwia3x.gif
To elaborate, notice how on the first click, it animates the clicked image and then the text (or at least it appears that way) whereas on the subsequent click, it animates the text first and then the image? Is there a reason for the order of animations here? And do we have any control over it? Additionally, can we control which kind of animation it is or what path the animation takes?

Link to comment
Share on other sites

I must be missing something because as I watch, it's animating in exactly the same order each time - you must have a stagger applied. The QR code first, then the text, then the image. I believe the order is just whatever the Array of targets is in. You could alter the stagger value too, like use a negative number to go in reverse, or use the object syntax and the "from" property, etc. Tons of options. 

 

45 minutes ago, Chromium said:

Additionally, can we control which kind of animation it is or what path the animation takes?

Not sure what you mean by "kind of animation", but you can certainly define an ease. As for the path, anything is possible with enough custom code but it's not as if there's some magical property that makes things go in some fancy curvy path, no. Doing so would involve a lot of customization and plotting of coordinates. Again, possible for sure but not simplistic. 

  • Like 1
Link to comment
Share on other sites

I completely forgot I had stagger on to be honest. That was screwing with my head 😂

And ease is exactly what I was looking for, thank you!

  • Like 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.
×