FLIP plugin messing with css grid during flip...

[rchrdnsh]

Trying to use the FLIP plugin in svelte and having an issue.

 

I am changing the width of a div changing it's grid-column value dynamically.

the grid value will change from "9 / 14" to "6 / 14" for example, and I am using the FLIP plugin to animate the changing width.

It works just fine in one direction, as the line gets larger, but going in the opposite direction the flip process actually messes up the width of the grid-columns of the parent grid. I am expecting that this will NOT happen...

 

In any case, the video explains it much better, and with a visual example...I can try to make a codepen at some point, though not really sure how to port svelte into there...will try to do if needed.

 

Video explaining the issue...

Thank you for your help!

[GreenSock]

Hey @rchrdnsh! I'm running to two lengthy meetings so I don't have time to dig into this, but it would definitely be a huuuuuuge help if you could just create a very minimal demo that's not in Svelte or any framework. Maybe you could literally just mimic what you're doing but with only a couple of grid columns in simple markup in a CodePen and post that here. We just need to see it in action, in the browser and be able to monkey with it. A minimal demo will significantly increase your chances of getting a solid answer more quickly. 👍

[rchrdnsh]

hmmmm…I think I can make a svelte REPL…not sure how to do the reactive svelte stuff in vanilla js, however…I’ll try to figure it out, tho.

[Rodrigo]

Hi,

 

Have you tried with the tick() method in order to make sure that everything is updated properly before creating/running the Flip animation?

https://svelte.dev/docs/svelte#tick

 

Happy Tweening!