Support for ID selectors when using Webflow interactions

So im playing around with the interactions feature, awesome I must say. I replicated the “hover reveal interaction” as practice for a grid of portfolio items and I got it to work fine. However, it is affecting all of the other portfolio items since they have the same class names. So if I hover over one of the thumbnails, all of the items are activated as if I am hovering directly over them.

How do I keep it to the specific thumbnail being hovered, without giving each one their own class name and adding way too much code bloat?

Thanks!

I just came here to post basically the same question - I was surprised that “Affect different element(s)” doesn’t seem to recognize unique IDs.

I think it’s going to be much more common (for me at least) to have multiple elements of the same class that need to control interactions on an individual vs. class basis.

Is unique ID in the cards for the Affect different elements option?

Absolutely! We plan to support nested class selectors as well as ID selectors, but unfortunately didn’t have time to include for launch. You can, however, limit the selector to nested elements, so hopefully that helps reduce some extraneous class names.

2 Likes

Glad this is in the works. Came across this also but just figured, in due time y’all would have it going.

@danro Will there also be the ability to have it effect more properties like background color or font color while scrolling?

I did try to make one of those accordion menus using the IX… It kind of worked. Could very well be user error… still learning. But, when making one element open (which closes another element like it) it works. Clicking the element it closed, needed to be clicked twice. After its clicked twice it’ll work correctly. Which makes me feel like it’s something I did. I just actually wanted to see how possible it was with the IX.

@thegrafiqlyfe and I see what you’re trying to do. We want to add a “filter sibling elements only” for when affecting different elements so that you can create accordian-like functionality with interactions.

3 Likes

Excellent job on the IX.

I have a similar (maybe it’s the same) question.
I have 100 products that I need to show the ingredients for when a button is clicked.

I need to create 100 interactions until the feature to select nested classes is available, correct?

You can see where I’m going here:
https://webflow.com/design/mmdproducts?preview=27e2151b8c85bc33626d25a99b9048e4

I did the first 8 buttons as you’ll see.
Again, this is the best route before nested classes capability?

Thanks.

@TStanwood A workaround would be to add a Link Block, and have the image inside. Then you add the interaction on the Link Block. So it’s overflow: none with a fixed height and then it expands to it’s “auto” height to show the image when clicked.

Epic bump – staff said planned design, but 1 year later+ and still nada ~

1 Like

Yeah I’m hoping for an update soon as well. Would really like to have this feature.

+1 for ID selectors and/or nested classes for interactions. Doing so would enable us to reuse elements by adding new interaction and style without having to rebuild them from the ground up.

Hi @danro and @thesergie,

I was just wondering how this feature has been doing? I understand you guys are in the works but wanted to get some updates and reassurance from you guys, because I am starting a very important project that depends heavily on interactions. Therefore I am currently debating on whether or not to use webflow for it and subscribe to a pro account. I don’t want to spend a whole bunch of time to do workarounds and once the feature does come in I have to redo the whole project.

This is not a pretty limitation that webflow currently contains at all.

Please give us webflow lovers some updates and a possibly ETA for this … so we could stay loyal to webflow! :smiley:

Greatly Appreciated!!

We currently don’t have a way to target ID’s in our selector system and would require quite a bit of rework. We’re actually rebuilding our own website and are heavily relying on interactions for complex animations. We ran into the same limitation and luckily found a workflow that worked pretty well. To get the same result we add global classes to existing classes and target those global classes in the interactions selector (since currently interactions only allows you to target global classes).

To do this you’ll have to create a new global class by adding it to a new element on the canvas (or an existing element that doesn’t have a class yet). Then add that global class to an existing class or combo class that you want your interaction to be added to. I tend to add a prefix to interaction-only global classes (ex: “ix-color-block” or “ix-width-grow”) and choose these classes when creating my interaction.

Hope this helps!

4 Likes

Thanks @thesergie for the reply and the suggested workaround. I will try to use this method for the following project but is afraid that the extra amount of global classes needed to be declared, along with the extra amount of interactions … for occasions like having the same animation for a whole set of elements but only triggered by clicking a certain button, thus I would have to define numerous interactions that runs the same animation … would cause my project to be less manageable, unorganized, not semantic and bad performance.

Anyhow, I believe using webflow for prototyping wouldn’t be too big of a problem.

Thanks @thesergie! :smile:

Keep up the good work!!

I’m gonna give this a bump… any progress with this requirement?

+1 from me too for ID Selectors :wink: