Interactions start from wrong place

Hey! I’m really new to Webflow and have started a prototype, with some clickable characters.
When the page loads, the character I have a hover interaction for, loads at the end state of the interaction rather than the beginning.

The same thing goes, when you click on it. 3 menu buttons appear in light green, which is the hover colour, not the initial state colour.

I have set the initial state, of my interactions to the right size and colour and have done everything correctly as far as I know at this point. Very confused, so thanks to anybody who can help.


Here is my public share link: LINK
(https://preview.webflow.com/preview/help1st-mobile-prototype-2?preview=bfea2e6058794549474173846bc5c54e)

Hi @SimppaUX
Welcome to Webflow and thanks for sharing your read-only link too!

Could you explain the exact interaction you’re trying to make so that we can help create this for you and we can explain what might be going wrong?

Thanks!

Hei, thanks a lot!

So, all the interactions work exactly as planned. However, when I toggle preview the elements with interactions load in their affected state instead of their initial origin. Then I hover my mouse and click to test them and they all reset to how they should be intended. It’s very odd…

Not sure if it has anything to do with the free Portfolio Wireframe template that I used. Perhaps there is some clash of sorts that I can’t see.

Do you see the public link?

You’re using Legacy Interactions, and a hover state which is conflicting. The whole set up is a little messy, so it’s hard to get to the bottom of it. Using IX 2.0 will be so much easier for you.

All the images should have the same class name as each other.
All the buttons should have the same class names as each other.

You can then create one interaction for images and use this on each, with the Class affecting only it’s children or siblings.

Welcome!

As @magicmark says. Your setup is a little messy.

A quick tip to interactions:
Never use initial state on hover out in interactions, they suddenly take that state on load.

So try deleting every initial state on hover out and then it should work :slight_smile:

-David

1 Like

Also, you have set IX2.0 first, then a legacy interaction, then a hover state. You should try and avoid mixing legacy and IX 2.0.

1 Like

Really appreciate your advice. I must not be clear what legacy and IX 2.0 is… There’s a toggle for those legacy interactions. I see that I have a show/hide interaction in there. So I’ll remove that and keep the others which is the new updated version?

The default now is IX 2.0.

You don’t need to switch to Legacy at all, if you can delete all the legacy interactions and use just 2.0 then it will be far easier to build and edit in the future.

1 Like

Try deleting every legacy interaction, hover state and interaction. Then ask yourself this:
Does this hover on only affect the same element?
If yes, use hover state. e.g. Buttons
Does this hover on affect other elements?
If yes then use interactions

Click triggers and anything else is best with interactions too. E.g. when you click on a character, something else pops up.

Never use legacy interactions(IX1.0), IX2.0 is much better now.

Hope this makes sense :slight_smile:

Oh wow, I had no idea about the states. This definitely helps to keep things tidy and running smoothly.
Thanks guys for clearing these little things up for me.

So instead of creating 10x on and off click interactions for only 5 buttons, I can make just one interaction and repeat it for all in the similar class type? I tried to do this, but when I clicked one, all them interacted at the same time.

You can change if the interaction affects the children element or the sibling element. If this still doesn’t work, you should try changing the structure.