Hi everyone,
I have a hover interaction added for all the buttons on my website.
But when I hover one button, sometimes the other ones also do the jello effect.
The effect is applied to “class” instead of “element”
There are too many buttons scattered through so many pages. Setting it to element would fix it, but then i’ll have to go to every page and change everything one by one. and changing it in the future would be hell as well.
any help is appreciated.
Hi, @Alborz_Heydaryan
You need not only to set the animation to the class name, but also set an Affect to Interaction trigger (like on the screenshot). So if you hovering a button, you’ll affect exactly this button.
I see. This method works for custom animations. But i’m hoping to achieve this for the Jello effect which is one of the presets.
Yep, you’re right. But I think such kind of jello effect can be rebuilt with custom animations. I’ll create one tomorrow and provide you with a showcase link where you can clone a project. This way you’ll be able to apply the animation to all particular buttons.
That’d be awesome. thank you!
@Alborz_Heydaryan check live page Jello button here are two buttons with preset and custom jellos.
You can clone project here https://webflow.com/website/webflow-samples (jello button page)
Please like showcased project if it was helpful, thanks
Oh wow! I can’t tell them apart. You’re amazing! Thank you for this. I have so much to learn.
So i’ve created a custom rubber band effect, and I’ve applied to to my “button” class. In the interaction I’ve set it to “interaction trigger”
But it’s still triggering everything.
You can see it here:
I believe the reason why all of your buttons are affected is, because you trigger them all at once, so to affect only the one you are hovering, change to affect only children with this class.
Let me know if this helps.
Worked like a charm. Thank you. Curious why the “interaction trigger” didn’t work.
Glad it worked! It’s the way JS works behind the scene.
