I am trying to create an effect where I have a link appear and disappear on when clicking the arrows in a slider. I am going to be reusing this component in several places, and am trying to reuse my interaction.
What I have is a mouse click trigger on the arrow right (.right-arrow-conditional), with an effect to hide my chevron targeting the children of the class (.component_chevron-wide).
What I want to happen is for the chevron to be visible when .right-arrow-conditional is triggered, and hidden when .right-arrow-conditional is triggered.
This is for some reason not working
Then to add complexity, I am using the classes and children of the classes, as I am reusing my component in multiple places, and I want to have the same behavior in every component. I can only get it to work if I don’t use classes, but then I can’t reuse the component without having to recreate the interaction for each individual component
I have reused interactions before, following the same logic, without issue, so I am really stumped as to why it’s not working now. You can see what I’m trying to do in the carousels at the bottom of the page.
I think this is a common issue for a lot of people. And they’ve changed the way class interactions work midstream which added some headaches when I shared a project to a team member and then had it shared back to me. It made every interaction individual. GAH!!!
So the best solution now is to do the thing where you assign the interaction to a copy of the original, and then right-click (command-click) on the element in interactions panel and tell it to “change target” and select the new object. This saves some time but the problem is that it’s individual. So if you want to change the speed of an interaction, they all have to be changed individually. I’m now having my clients sign-off on interactions before I apply to similar elements.
I’m probably missing some easy step to make a universal interaction (that a change will apply to all similar elements), but have yet to find a solution on my own yet.
If you move component_chevron-wide inside of component_collection-horizontal-scroll, directly underneath Slide Nav 14, using the Navigator and then set your interactions to target only siblings of the class, you should be good to go.
I also set a page load interaction directly to the component_chevron-wide class and set it to 0% opacity when the page first loads - applied to all elements with this class.
Really, thank you thank you thank you for your help 
