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.
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.
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.
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?
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.
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.
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.
