Component action only works once and only on the first item when used in a collection display

Ask us anything How do I?
1

Hi all,

I have a collection being displayed, and I wanted a way to animate an icon within each item when the user hovers over the parent element.

Here’s what I did:

Created a simple component

  • Converted the icon to a component
  • Created component variables for the properties I want to change on a hover interaction
  • Bound the properties to those variables
  • Created a component action to change those variables

On hover of the parent element

  • Created a workflow that executes “on mouse enter” of the parent
  • Added the action “Execute component action”
  • Selected the component and action

When I go into preview and hover over the first element. It works! When I hover over the other elements, nothing happens.

Also, on a refreshed page, when I hover over any other item other than the first element (e.g., the second or third item), the hover action is executed on the first! :rofl:

Any ideas what’s going on here?

Thanks in advance!

2

Anyone?

3

Hey :slight_smile:
What type of animation are you trying to accomplish? A simple CSS one?
Have you tried adding a hover state to the parent element and with the Apply to children toggle on.
And on your icon, adding a new state on parent:hover?
CleanShot 2024-06-07 at 15.06.29

1 Like