Streaming live at 10am (PST)

Hover Transitions

I need need help figuring out the Hover Transitions. I’ve attached an animation screen capture showing what is happening, what I’m doing, so perhaps someone can tell me what I’m doing wrong. What I want to have happen is that the transition or animation happens at 500 ms or 1000 ms, when you Hover over the navigation menu categories, in other words, the in and the out, the mouseover and mouse out. Right now, it’s appearing to be instantaneous on the mouseover, and then the ease happens on the way out. I’ve tried clicking on the various Ease icons to see if I’d selected the wrong one, but to no avail. I adjusted the ms to 2000 to show the contrast between the Hover On vs. the Hover Off. I did a quick search of forum topics on the subject and it appears that others, even WF staff have had some problems with it. I feel like it’s a UI issue, that there must be a way to set this up so it’s more mistake-proof. Either way, with the existing set up, I’d like to learn how to do it so I can do it every time.

Test your transitions in preview mode, or once the site published. It’s not always reliable in edit mode.

If this persist can you share the public link of your site? Thanks.

1 Like

You beat me to it @vincent :smiley:

1 Like

Did you also watch the gif anim loop, like, 25 times? (:

1 Like

It was a minimum of 50 :blush:

Haha that’s why I’ve beat you then :smiley:

Vincent et al. here’s the read only link. I did try it in preview mode, and it acts exactly the same.

Btw, does anyone have any quick thoughts on whether a brief animated gif is a good method of quickly showing what’s happening with a particular issue. It seems better than a screenshot, faster than doing some kind of video dropbox link. It seems like a good idea to me.

We’ll be looking at the link.

Gif anims are a GREAT way to show things, but here on the Webflow forum, nothing is better than a public link to begin with. Public link + animated gif is a dream (:

Also try to be short and clear and avoid big paragraphs (: I’m not complaining, just you seem to genuinely want to know what’s the best way to ask things here so I say it :smile:

Tip: Don’t let your transitions to ALL. Prefer adding many transisitons and set them to the exact thing your transitionning to. Here Tranforms. It’s a tip given by Webflow to make your pages lighter.

Also, your transition seems to work on, so once the site published… can you double check that and publish your last modifications? As far as I see it should work as expected, the way you’ve setup it.

Many screencast tool are faster than making a gif. Gif can be better because it sits in the post and you don’t have to click to navigate to a video.

I didn’t know that setting it to all would make the page a larger file size but that’s good to know. I just set it all for expedience sake in my demo, but had been using separate transitions for transform and font color. I had it working somehow by accident in an earlier iteration, which is what you saw on the published page, but have changed many things since then and can’t remember what I did. So I just republished now, and it’s not working, same as it’s not working in design mode. Reload that .io page and check it out for yourself. I know it should work, but it’s not, which either points up that there’s a bug, in my estimation, or that the UI is confusing, and I’m doing something wrong because of that UI. I think the Hover is sort of confusing. I don’t know why you set the Hover state settings after selecting Hover from the drop down menu, but you only set the transitions in the normal state.

Perhaps you can try a test on one of your own practice sites and tell me if it’s working for you to achieve what I’m trying?

Also, btw, I’m sorry about the verbosity, but brevity is not one of my strong suits. I will try to be shorter, but I sometimes find I’m more misunderstood the more succinct I try to be.

Not larger but requiring more process power. Here’s where I read that, the whole page is full of tips.

I’ve been setting everything to ALL for a year and I didn’t run to significant issues, I have to say.

I wanted to say that before and I should have: at this stage, you must have broken something and it’s quicker to redo from scratch. i tested the principle on your own page and it works, see here:

Also, you Funny page has nothing funny, I’m kind of very disappointed :wink:

Vincent, thanks for your help. I wish I could’ve figured out what was wrong, but I fixed it sort of your way. Rather than start from scratch with a new NavBar, I X-ed out of the Class attached to every menu item, and created a new class, and added that to each menu item, adding the scale effect in the Hover State, and the 500 ms transition in the normal state, and now it works, Hover On and Hover Off. I republished and you can see it if you reload that .io page.

As far as the Funny page goes, since I’m trying to see if creating a one page site is viable, I used the free second page to test out techniques before using them on the main page (a pretty good strategy, I think). I delete them when I’m done testing. Anyway, just came up with the name funny to mean experiments, and “the funny pages” was the name for the comics page of the newspaper when I was a kid, the less serious section of the newspaper, though apparently newspaper comics are taken very seriously these days, a whole other topic.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.