Skip to main content
Solved

How can I maintain component position with hover interactions

Ryo

I have these two components in different size (image A), and I’m trying to trigger a state change when hovering over a default component, which is the left one in the image.

[Image A]

imageA

The hovering interaction seems to be working just fine, but the issue is that, the second component shifts to the bottom right when the state is changed. (Image B to Image C)

[Image B]
Image B

[Image C]
Image C

What I would like do here is maintain the component position on hover as you can see in the image below. (Image D)

[Image D]
image D

I am not sure if I’m doing this in the right way, but any tips would be very much appreciated.

Thank you.

Best answer by Gleb

Currently you cannot achieve that with Interactive Components. You can either use Overlays for that or make both components equally sized.

View original
This topic has been closed for comments

4 replies

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • Answer
  • April 29, 2021

Currently you cannot achieve that with Interactive Components. You can either use Overlays for that or make both components equally sized.

Ryo
1 person likes this
  • Ryo
    Ryo
Ryo
  • Ryo
  • Author
  • 2 replies
  • April 29, 2021

I see, thank you Gleb!

Victor_Morales1

How are you creating that overlay state in the interactive components? maybe maintaining the same frame size and adding additional shapes or a shadow/stroke could work

CleanShot 2022-04-27 at 7.20.33@2x

Koen_Damen

Just encountered the same issue and found a workaround that might help designers in the future with this question. Follow the following steps:

  1. Place the larger shape on top of the smaller shape. Make sure both shapes have the same center.
  2. Select both shapes and create a component.
  3. Make a variant of the default variant (and call it “Hover”).
  4. Delete the larger shape of the default variant.
  5. Add the hover functionality so the component changes from default to the Hover variant.

The “smart animate” transition won’t look perfect, as it does not enlarge the small shape but rather makes the bigger shape visible on top of the smaller one, but the positioning is fixed 👍.

A
1 person likes this
  • A
    Ai-Chun_Huang
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings