Interactions not working :(

Hello all! I hope you are having a nice Wednesday :smiley:

I’m struggling with some interactions.
I made a collection list, which is divided in 2 different components to give place to the CTA card (you will see it if you scroll down, the CTA module).

The thing is: even though the second copy of the collection list (which starts at #6) has the exact same parameters as the ones above, the interactions on hover doesn’t work.

Does anybody can point me towards the right direction to fix this??

Thank you a lot beforehand :smiley:


Here is my site Read-Only: https://preview.webflow.com/preview/project-57bca6?utm_medium=preview_link&utm_source=designer&utm_content=project-57bca6&preview=290dbc7b1047d486402f674b1b601f22&mode=preview
(how to share your site Read-Only link)

1 Like

HI @ohlalasacrebleu

You should try the following

  1. you should try to combine all the hover interactions into one single one - you don’t need to have them separate.
  2. You should go over all the elements in the interaction, select them again, and make sure that all of them are set to affect “class” and not “selected element”
  3. also if you animations are hover, you can consider doing it with states rather than IX2 - sometimes you can get better and more consistent results…

Thank you! I’m a bit confused about 1. They are all together in the same elements.
Regarding 2) for some reason, if I set it to affect “Class” it doesn’t work :frowning:

  1. I found this to change some bg color and stuff on hover, but not to trigger a specific animation. Is it possible tho?

Thank you a lot!!!

  1. you have several interactions running on one element - try to make one interaction running on one element
  2. try to redo the interaction from the beginning - if you see that affect class is not working try to change it to selected element and see if it works - but generally better to use class
  3. the entire interaction you have, you can recreate with hover state and it is very simple (and its native CSS animation) -

a - select the element you need to animate - position and style it in the “BEFORE” state of your animation (meaning the style and position of the element as it has to be in, before the hover animation starts)

b - chose the transitions you will need - (scale, opacity, position etc…), timing, and the easing.

c - select hover state put the element in the “AFTER” state (the position and style of the element where it needs to be after the hover animation runs).

The transitions that you picked will animate the transition between the “BEFORE” and “AFTER” states.

1 Like

Thank you a lot for your explanation. I’ll give it a shot. Cheers!