New GSAP UI - HOVER help!

[Aaron_Capture (Aaron van der Sleen)]

Hi All, I am having issues with GSAP and Hover interactions.

So I have a grid of images, which I’ve created a hover animation and then copied the divs across my grid, thinking I just need to change the photo and titles and I’m done. but no. I can’t figure out how to have them trigger only when specifically Hovered over. They’re triggering all together, or not at all.

Can anyone explain what’s going on and how to have them trigger only when the specific div is hovered? Any help would be greatly appreciated.

[WebflowAIModerator]

Hi there,

To prevent hover interactions from triggering simultaneously across your grid, you’ll need to adjust the animation scope in your Interactions panel. Here’s how to fix it:

1. Open the Interactions panel
2. Locate your hover animation settings
3. Find the “Class” section
4. Select “Only children with this class” option

This setting ensures the animation only affects elements within the specific div being hovered over, rather than triggering all instances across your grid simultaneously.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

[Aaron_Capture (Aaron van der Sleen)]

It doesn’t seem to work. Not sure if there is a bug? Shouldn’t be this difficult. lol Maybe I’m doing something wrong? but, I’ve spent hours changing all the options to no avail. Would be cool to see someone build a gridd with cards. Having the main div be the hover trigger only, and have it animate a black overlay on a photo or animating the card text etc..

I cannot find any real-world examples for such a simple animation. Except on this video https://www.youtube.com/watch?v=APJQdypdA90

The difference in this tutorial is, the card trigger is the main div and the animation is “same as trigger”.

[Aaron_Capture (Aaron van der Sleen)]

Just to update. I’ve recreated my hover animation using gsap code thanks to Claude AI, and it’s working perfectly. I don’t know if there is a bug with the selectors? or if I was doing something wrong?

[Pablo_Cortes]

Hello @Aaron_Capture,
So if you want to animate multiple elements on hover you have to specify which elements you want to animate each time you hover over a trigger element. You also have to add two triggers, one for hover in and one for hover out. Something like this:

I hope this helps.

[Aaron_Capture (Aaron van der Sleen)]

Hi Pablo, Thanks for the reply. I did do this, but I didn’t know what to specify for the scope. Could that be why I couldn’t get the hover to trigger on just the one card? I’m going to give this a try. Thank you.

Would I specify all the elements affected in the scope? eg. my overlay & title classes?

[Pablo_Cortes]

Hello @Aaron_Capture, Ok so if you want to animate multiple elements on hover, then the set up is a little bit different, follow this set up:

1. First set up the element that would be the trigger

2. Then on the actions select the first element you want to animate

   

3. Then make another action but with a different element that you want to animate

   

4. You should have two actions

   

5. Also don’t forget to set your hover out animation

   

I hope this helps.

[Aaron_Capture (Aaron van der Sleen)]

Hi Pablo, Okay I’m going to try this out. Thank you so much for taking the time to explain this to me.

[azdonev (Alexander Donev)]

What worked for me, for the trigger, set it to the class with all matching elements as the scope.

Then on the actions, keeping the target the same as the trigger and then target children or descendants using scope