I am having trouble getting my hover states to work consistently. Any help is greatly appreciated!
On my page “Work” I have a tabbed/filtered selection of thumbnails pulling from my CMS. On hover the thumbnail image should be covered by a gradient color and a button that zooms (see image).
The first time I load the page everything works fine. But if I navigate to a different page on the site and then navigate back to “Work” (using the a main sit nav), the page loads with the hover state appearing on top of all the thumbnails without hovering.
If you are creating this animation with interactions, you may need to be sure that the hover out interaction re-sets the action to its initial state. Additionally, you may need to set the initial state by default in the interaction (the little toggle that says initial state on the interactions panel). This will hide the interaction on load and then based on your triggers, should work on hover.
Again, this advice is being given without being able to look at your configuration. If you share the site links, I’ll take a look and confirm this for you.
I also see that you have the share link there. My bad.
You have the initial interaction configured correctly. the problem is with your hover out interaction. You have different elements there than you do in the first one, so the gradient is not having the state change back to hide/show.
I went in and duplicated your “hover in zoom” interaction, and then just delete everything but the three elements that you have set as initial state. Then turn off the initial state toggle and all should be good.
Here is a video walkthrough of how to get the desired result from what you already have in about 1 min. Not sure why the audio did not record. Sorry about that, but it should be clear enough between the video and the notes above.
Then deleted state change, and set toggle to remove initial state settings?
I am not sure why it would work differently in the video as it does in the real world.
One thing you may notice is that if you are in the editor, and go from one screen to the next, the interactions may not always load. This is something you will see with all interactions on the page.
You need to click back and forth from front to back end to reset the interactions, but it should work fine on the live site.
If you look at the video you made, I think you actually still experience the issue at the end of the video. You load the Work page and all the thumbnails are covered by hover state. You have to click “Preview” off and on to get it ti work/reset…
But is that what you are describing re: working in the editor? It should be fine on live site?
fyi… I have not published site yet, just staging right now.
Yes, that is what I mean. When you are viewing the site inside the designer, the interactions do not always reset when going from page to page while in preview mode. But when you click the little eyeball to go back in to edit, and then into view mode again, the interactions will reload. This is a glitch of the designer, but will not be present on the live site.
You can always publish to the staging domain before connecting to a live domain so that you can see your work live on a webflow subdomain outside of the designer.
Now I have another issue on the live site… when I select different filters on that page (Interactive or Branding), the thumbnails appear smaller than what they should be!
I see that. The filtering is not a native Webflow functionality correct? Are you using some kind of custom code there?
How are you controlling the sizing or positioning of those elements? If it is percentage based, or something like that, then maybe the reduced number of elements is changing the dynamic spacing or something?
I am not really sure how to help you with that one honestly.
