Flip an animation order

[ModiFax]

hi, I created an animation that should move in the following order:
1. When you click on the number 13, it should jump to the first position of the respective line (an animated swap)
2. The object grows animatedly evenly 100% of the line

(2.1 the breaks should be animated while growing)
3. scroll into the line.

essentially it works quite well. However, I didn't see any possibility to attach the flip after a To().

The code should (even if it is not clean) calculate everything correctly so far.

At the moment the animation jumps straight to the 1st line and grows. The exchange and waxing should happen one after the other.

The browser have to be like this to test it:

 

Important: in this constellation, the object must not be in the 1st position when testing. Then it doesn't work

 

I know it's a lot of code. But the only passage that is really relevant is in the Grow function:

 

Thaks for help

See the Pen OJopBbN by ModiFax (@ModiFax) on CodePen

[Rodrigo]

Hi,

 

You actually have a lot going on and this is not the simplest thing to build to be honest.

 

Keep in mind that in order for Flip to do it's work you need to actually make a change in your element/layout and then tell Flip to animate from the state previous to the change to the state after the change, that is not happening here for example:

function ResizeCardWrap() {
  const state = Flip.getState(".card-container .card-wrapper");
  Flip.from(state, {
    absolute: true,
    duration: 0.3,
    ease: "power1.inOut"
  });
}

What I would do in this scenario is sequence a series of Flip animations using their onComplete callbacks. First move the selected element to the left of the row. Then get the state of the target elements and all the elements after it using Flip and apply a full width to the target element and do a Flip animation for the width of the element and the position of the rest of the elements (this could be an expensive task in terms of rendering depending on how many elements we're talking about). Finally use the ScrollTo Plugin to scroll to the element`s top position.

 

As a side note what I would really do is to not move every element below the one being selected. I would create two rows or full width elements above the selected element and it's siblings. I'll reparent the selected element to the top one (orange in the image) and animate the width using Flip and at the same time I'd animate the height of the orange element in order to create the shifting of the rest of the elements. Then I'd do the same for the remainder elements I'd do the same, move them into the other full width element (fuchsia in the image) and animate their width so they use the extra available space and you don't have a bunch of elements below the selected one shifting to another row. Maybe you could event use transforms to shift the elements below the selected one for better performance.

 

I'm sure that there are other options for this, but as I said this is not the simplest thing to do and it goes a bit beyond the help we can provide in these free forums. If you want you can contact us for a consulting job or you can post in the Jobs & Freelance forums to request help from other developers.

 

Good luck with your project!

Happy Tweening!