Flickering when using height animation

[YannDuv]

I am currently trying to make an animation of a card. The card has a TwicImg (vue3) component as a background.
The card animate a transition between height 100vw and 100%.

There, the TwicImg components detects that the image size change and trigger the fetching of the images 4 during the animation. The of those images make the animation less flowing.
Using the property "step" did not work as it only check for the image width but not its heigh.

Expectation, the step property should work on heigh too and prevent the reloading of new images.

(On my side, I will create a workaround on my animation to animate with a transform: scale() expecting it to not trigger image reload)

[Strift]

Hello @YannDuv

Thanks for opening an issue!

Our team will take a look at it as soon as possible. Let us know if the workaround is working as intended in the meantime.

Cheers,

[jaubourg]

Hello @YannDuv,

Sorry for the late reply.

The TwicPics components do not support animation of width and height since they are the very information we use to determine the size of the image to fetch as you observed.

We should document this and point to CSS transform as a supported mean of animation.

We hope this is not too much of a limitation on your end,

Regards,

Julian