Hi all! I’m taking my first foray into the world of state and interaction within Plasmic/React, and wondering if someone might help me overcome a roadblock in my understanding. I’ve done the interactions tutorial in the Plasmic docs and it was very helpful. But I’m stuck trying to figure out state/interactions between these two components:
A simple component for text with a base of 50% opacity, and 100% opacity for the hover variant. On my page I have this component replicated three times - lets call the variants Text1, Text2, Text3
Another component that has three variants each contaning a different image.
I want to somehow link these two components whereas the user hovers over the Text1 component and the first image in the image component shows. Text2, the second image will show, etc.
I hope that makes sense. Thank you very much for any help you can provide!
Thank you for the help and example, @yang! I understand the general theory now, though I still must be doing something wrong. I see an array is being used for the images in this case. What data type should I use to dynamically switch my variants? Just a “text” type with the name of my variant(s), or an array of the variant names?
@yang Me again! Sorry to bother, but I’m wondering if there is a native feature in Plasmic to have the variants of my image fade in/out as they are selected? I tried using the Transitions feature on my variants but didn’t have luck. Thanks!
This would only be possible in HTML/CSS if you use different image elements in your component. For instance, if you have three different variants that you are switching between, then you would need three different image elements, all starting with opacity zero, and each variant would make one image opacity 1. The transition would then work as expected. Let me know if that helps!
Thanks, Yang!