Flip.fit not animating, need guidance

[Gary Kisela]

Hey Guys, I need guidance/tips on using GSAP Flip.

So if you see my page here: https://murial-f3a135.webflow.io/test-gsap, I'm struggling to figure out why the FLIP isn't animating. The animation sequence I need help with is the last one (right after the text "being unforgiving on design, opening grander scale of remembrance" faded out).

It seems like I have achieved the initial state and the final state just like I wanted. But why isn't it animating?  I want the image to scale back to the original size (like before I animated it to enlarge and modify its edges' corner radius). From what I learned from the resources available, Flip will animate the delta between the initial and final state, right?  

I'm using Flip instead of the usual tween because I want to reparent the element into another div, which will be necessary for my subsequent animations.

I'm still learning to code so I'm having a difficult time replicating and showcasing this in Codepen. I'm just copying the Java Script for now, but I'll be ready if more info is needed! (find "Flip.fit" in the code to jump to the animation in discussion).

Warmest,

See the Pen XWwEbpa by Gary-Kisela (@Gary-Kisela) on CodePen

[Cassie]

Hi Gary!

 

Thanks for the demo, but I'm afraid this isn't enough info for us. It's also quite a lot of JS.

 

The issue you're experiencing could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please adjust this demo to provide a very simple breakdown that illustrates the issue? 
 

Please don't include your whole project or all your code. Just some colored <div> elements and the particular part of the GSAP code causing the issue.

i.e JUST the bit that's doing the FLIP, let's start there and see if that's enough to show the problem.

See if you can recreate the issue with as few elements/styles as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

[Gary Kisela]

Hey Cassie! Thanks for getting back to me. Got it.

As requested, I have updated the Codepen! The reset button is not working as intended but the main challenge where I'm having difficulty with is there already. (So please refresh to reset the animation, sorry!).

On the console, there seems to be a "TypeError: r.getBoundingClientRect is not a function" message right on that animation sequence. Not sure what that means though...

[Rodrigo]

Hi,

 

The error you're getting is because your code is missing an argument. Flip's fit() method takes three arguments as stated in the docs:

Parameters

• targetToResize: String | Element

  The DOM element that should be resized/moved. Can be selector text like ".my-class" or a reference to the Element itself.

• destinationTargetOrState: String | Element | FlipState

  The DOM element or FlipState that should be fit into.

• vars: Object

  The vars to use for the fit. This can contain standard tweening properties like ease, duration, onComplete, etc. as well as special settings like absolute, fitChild, scale, etc.

But you're providing only two:

Flip.fit(".box-blue", {
  targets: state,
  duration: 1,
  ease: "power1.out",
  absolute: true,
  scale: true
});

Finally since you want to reparent the element, maybe Flip.from() might be an option that you could explore as well:

https://gsap.com/docs/v3/Plugins/Flip/static.from()

 

Hopefully this helps.

Happy Tweening!

[Gary Kisela]

Hi Rodrigo,

Please, if you have some time to spare, can you give me an example on the same Codepen of what that 3rd argument would look like so that it works? I'm still a beginner here and have read the docs and followed YouTube tutorials but can't get it to work. I believe it's helpful to see how the more experienced people would do it as I'm certain that GSAP can animate the idea I had in mind, I just haven't gotten it yet.

I have tried the flip.from too before flip.fit yet in terms of box position this seems like the closest one, just that it's not animated. So are you saying that the flip.fit can't reparent elements?

Warmest,

[Rodrigo]

Hi,

 

The second parameter should be either a DOM element or a selector, it could look like this:

Flip.fit(".box-blue", ".box-green", {
  duration: 1,
  ease: "power1.inOut",
  absolute: true,
});

But I'm not really sure about what you're trying to achieve, that's why I also suggested to check Flip's from() method as well and maybe instead of creating a single timeline for all the animations, just create a re-usable method that allows you to execute different GSAP instances in the first animations and the Flip animation.

 

It would be really helpful a more clear and precise description of what you're trying to do and also I'd recommend you to just try to work the Flip animation since it seems the others are working the way you intend.

 

Happy Tweening!

[Gary Kisela]

Thanks for getting back to me Rodrigo.
 

What I want to achieve, is that in that last animation, the one being the blue box sits next to the green box, is for it to animate into that shape.

Just before that, the box is bigger and slightly to the right of the green. I want it to shrink, with the bottom left as the anchor point, which will end up next to the green one, as the one positionally demonstrated on Codepen. The position and endstate is correct, but why isn't it animating? I expected that Flip will animate the offset between the two states, right? (blue box bigger to the right - blue box shrinking and sit next to green)

 

(I have tried with a gsap.to but it can't work because I already changed the transformOrigin to top right on the first animation, and changing transformOrigin to the bottom left again in the middle of the timeline sequence will ruin it as it will reposition).

I'm sorry but I really don't understand your explanation. Both the "Flip's fit() method takes three arguments as stated in the docs:" & "The second parameter should be either a DOM or a parameter:" but hadn't I done that?

 
3 argument target, destination, object, and also having ".box-blue"?

What am I missing for the Flip to animate?

Warmest,
 

[Gary Kisela]

I figured it out!

[Cassie]

Just to clarify, three parameters means that you have to pass three things into the round brackets

Flip.fit(1, 2, 3)

Flip.fit(target, destination, vars)

Flip.fit(".box-blue", ".box-green", {
  duration: 1,
  ease: "power1.inOut",
  absolute: true,
});

 

[Gary Kisela]

hey guys I have a follow-up question. I have mostly achieved what I wanted to with Flip (updated on the Codepen), however, there's a slight peculiarity that I can't fix. It annoys me quite a bit because it ruins the smoothness of the whole animation.

That peculiarity is, that when the flip.from is animating, notice that the border-radius change is not smoothly animating but it's jumpy?

What I did in the Codepen demonstration was toggle the combo class. Everything is going fine, scale, position, etc. Just the border-radius. There's a difference between 8 px and 18 px, and I expect the flip to handle this offset by animating it smoothly, however it isn't and the radius seems to instantly change to that at the beginning of the flip animation instead.

Is this just how things are or there's something I can do to make it smooth? Any advice on this?