hey there! i’ve been created this animation where depending where in the product card you scroll over you see a different image and angle of the product and it’s working great. however for some reason i don’t seem to be able to figure out how to make the interaction independent from one card to another, when you scroll over one card all of them get affected and play the same interaction.
attached is my public share link so you can take a look for yourselves! any help is greatly appreciated, thanks in advance!
It is affecting all the items because in the interaction setup you’ve selected All elements with this class that means it will affect all the items with that class name. So to affect the elements that is related to the trigger element (elements with the interaction), you have to apply one of other three options.
In your case, your layout won’t let you do that, so you must change the way your elements are placed. Like in the image below so all the trigger elements and target elements will be on the same div. This way now you can apply the option to Only siblings with this class
Glad to help and I forgot to mention another way you can achieve something similar with just one interaction on the parent DIV. You can achieve this with Mouse move over element interaction
