Skip to main content

Hey,


I have these images that I would like to change in size when hovering.


I created two variants of the image one default and one large in size. Upon hover it should grow. It does work when I put this image component in a frame. Easy.


However when image component is nested inside another component variant with the rest of my content with auto layout it won’t budge at all. I guess the auto layout is limiting the movement or something?


Any idea how to solve this?

@Evert_Martin I’ve run into a similar issue. I found a fix by adding auto-layout to the component’s variants. Not sure why that works though.


So in this example, I set up 2 different image components.



  • They each have 2 variants “Small” and “Large”

  • They each are set to animate to the “Large” variant on hover.

  • However, one has auto-layout applied to each variant “Small” & “Large” and the other does not.

  • When instances of each are added inside a card component that uses auto-layout, the one that has auto-layout applied to its variants will scale, and the other will not.


→ View prototype

→ Get example file



Oh wow thanks for the help and the example file! amazing of you to create this for us!

One last issue I am having is the scaling of the image does not come from the center in my project but from the left top corner for some reason. Should be center. This is probably due to the auto layout in my component I guess?

In my example, I set the “Image2” variants to centered constraints

image


And then for the card, I align everything to center.

image


I added the above notes, to the example file as well for reference.

Reply


Terms & ConditionsCookie settings