Flip.fit props not transitioning

[qtnrtnd]

When using the Flip plugin with the fit method, I would like to also apply a transition to the background color property of the flipped box, but the changes occur instantly despite setting the duration to 2 seconds. Why is that ?

Thanks for your help !

See the Pen pvoKNNW by qtnrtnd (@qtnrtnd) on CodePen.

[Rodrigo]

Hi,

 

We'll have a look at it, thanks for the simple demo 👍

 

In the meantime this works the way you expect:

const tl = gsap.timeline();

tl.add(Flip.fit(".b", ".a", {
  duration: 2,
}))
.to(".b", {
  backgroundColor: "red",
  duration: 2
}, "<");

 

Happy Tweening!

[qtnrtnd]

Thanks for the workaround @Rodrigo

I hope a more dynamic approach will be possible. The real scenario is that I want to create a seamless transition between two DOM elements on different pages (I use Svelte). I created a transition function for this, where the Flip.fit variables are passed dynamically and 'props' will therefore vary from one element to another.

[Rodrigo]

Hi,

 

As mentioned we'll look into it, the code I posted is the best solution at the moment, but definitely not the last one, so stay tuned.

 

In terms of transitioning between routes (seems like that's what you're aiming for) the only caveat is that both elements should be present in the DOM at the same time, otherwise you should use Flip's getState() method, since you can also use a state on the fit() method:

const state = Flip.getState(".a");

Flip.fit(".b", state, {
  // config here
});

Also be aware that there could be unexpected results if the elements are re-rendered due to some reactive property being updated in the app, that could mean that the target elements might not be the same.

 

We hope to have news ASAP, but I can't give you an exact timing.

[qtnrtnd]

Amazing, I will indeed stay tuned !
Not a problem in my case, both pages are rendered during the transition, so the Flip recording occurs at the very last moment, when the current page is being left and the next one is (invisibly) rendered.

[Rodrigo]

Hi,

 

Apparently this is due to some styles not being cleared after the initialization of the Flip.fit() instance, although I can't assure you 100% that this is the case, we'll keep looking into it and have a response.

 

This demo has a workaround that prevents creating a Timeline and adding an extra Tween for the background color:

See the Pen QwWYzRQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[qtnrtnd]

This will definitely do the trick for now, thanks for being so quick ! I'm curious to see what the final solution will be.

[GreenSock]

Sorry about the confusion there, @qtnrtnd. It should be fixed in the next release - is this better?:

See the Pen NPWomZw by GreenSock (@GreenSock) on CodePen.

 

(that uses a preview of the next release)

[qtnrtnd]

That's it 🙂
I'll use @Rodrigo's workaround until the new release. Thank you both for your help !

[qtnrtnd]

Fixed in version 3.13.0 🥳

[Rodrigo]

Hey, thanks for testing and letting us know 🙌

 

Happy Tweening!