chubi-x

Thanks Rodrigo. I've moved on now as this was becoming a blocker but will definitely reevaluate my setup when i get back to fixing it.

can you try opening the demo in fullscreen and try resizing the viewport and then rerunning the pen? When i do that I get the original problem as stated in my first post

Hi @Rodrigo. I've applied the suggestions you made but i'm still getting the same issue. Here's a link to the updated pen: https://codepen.io/michaeladejoh02/pen/ExzydNd

I'm trying to animate the width of an element using ScrollTrigger and FLIP. It works fine except that on certain viewport widths it adds an unwanted Y translation on the element, usually something like translate3d(0px, -74.8404px, 0px);I first noticed this behaviour after opening up dev tools and refreshing the page (essentially resizing viewport). I also noticed that this might be related to the grid-template-columns of the the parent element which sets the target element to take up min-content. the translation isn't added when i use a fixed width but that causes the image to grow to fit a static layout instead of the layout changing as the image grows. I have attached a codepen link and screenshots of current behaviour and expected behaviour. Thanks and looking forward to a response from the good people of GSAP!! Note that this tends to happen after resizing the viewport and refreshing ( i am yet to make it responsive). it happens with viewports about 600 pixels wide so the bug might not show up in the codepen embed.