▼
Streaming live at 10am (PST)

Scale on Hover Not Working

Design help Animations & Interactions
#1

I’ve had problems with the scale, which I’m just doing on text, for a hover effect, enough times now that I’m starting to wonder if there’s a bug there. I thought I had a handle on adding a scale effect with hover selected from the states dropdown menu, and then adding a transform transition with states: none selected. But it’s not working in preview mode. Has anyone had any problems with Hover and Scale?

I also added a font color change and font color transition at the same time. That works perfectly in both design mode and preview mode.

Scale doesn’t work at all in preview mode. Neither the transition nor the effect.

#2

Please share a link for us to review:

#3

Here’s a link for you, Waldo. https://preview.webflow.com/preview/scindoyan?preview=b1d44ed1a23922be13a8c9df48902a91

So, I was trying to use the States: Hover mode in the Style Tab to add the scale 1.2x (and font color change), and then the 500 ms transition in the States: None mode to make the NavBar Menu items change on hover. The scale effect didn’t work in the style tab (yes, I named a class for the menu items). I did see, however, that you can also add a scale on hover in the Objects tab as an interaction. This does work. I did it for the first one, HOME. I’m not sure what is the use cases when one would apply a hover effect in one area or the other if that kind of effect is accessible in both places, but regardless perhaps you can explain why it’s not working from the style tab.

#4

Do you have an example of a state change you are trying to achieve? Like a link of a website where you like the hover effects?

I’m not sure what effect you’re going for exactly.
Here’s a playground of effects to play around in: http://playground.webflow.com/

With navigation items, I recommend sticking with a hover state that just changes one, two or three of the following:

  • Font Color
  • Background Color
  • Border Color
  • Border Radius

Let me know if you have any questions or anything in mind and I’m happy whip up an example for you to work off of. :smile:

Thanks,

Waldo
@waldobroodryk

#5

Thanks for the playground link. I will definitely explore that. As to your question, I thought I explained it above, what I’m trying to do, but I’ll try again. I was trying to make the navigation menu categories (e.g. Home, Contact, Design, etc.) change font color and scale up just slightly (1.2x) on hover. It’s only two properties. I did also add an on load fade + move interaction, but I don’t think that should effect anything relating to hover.

As I explained, I added the scale and font color change effect and ease transition in the style tab after naming a class. At first both effects were working in design mode, but scale wasn’t working in preview mode. Now, scale is not working in design mode either. Are you sure there’s nothing wrong with the Scale effect in the Hover State in the Style tab?

I was able to get the hover working by adding it to the fade + move effect in the Objects tab under Interactions. I’d like to have it work by adding it to the Hover State of a class in the style tab. When you looked at my read only link, were you able to see what I was doing wrong? Are you able to reproduce this in a new design page on your end?

#6

It looks like your hover scale setting is just set to 1.02, but when you change it to 1.20, then there is the desired effect that you are going for I believe. :smile:

Here is a gif:

Stephen-Cindoyan.gif987×577 364 KB

Is this what you’re trying to do?

So long as you don’t add a hover state interaction that changes the hover state of the selected element, you can add as many interactions as you’d like to. :slight_smile: So the load in animation shouldn’t be an issue. Some interactions don’t show up in preview, I always publish to staging then go and look at the live link. Let me know if you have any questions. :slight_smile:

Thanks,

Waldo

#7

Thanks for the gif (I think that’s the perfect way to show something in the forum). Unfortunately, something’s still not right. I thought maybe you were right, and it was that fact that the scale got set to 1.02 rather than 1.2 (good catch - and can you tell me how to set the default to be 1.2?) but that fixed it in the design mode but not in the preview mode.

Can you go back to that read only link, posted above, and check out the preview mode and tell me what’s going on there? Why will the font color change on hover in preview mode but not the scale?

#8

Happy to help! :slight_smile: Preview mode is not 100% accurate of what you’ll actually see once a page is published. Like I said, always publish to the staging link, then go view your site there and the interactions should be taking place no problem. :smile:

Let me know if you aren’t seeing the changes on your staging link. :smile:

#9

Waldo, it’s not working. Use the read only link above to take a look at my workspace. As an experiment, I added a new NavBar widget, and added a class to the HOME text to make it scale and change color. That works. So, the question is, what’s going on with the menu at the top of the page, where the scale on hover is not working? Here is the published link: http://scindoyan.webflow.io

#10

Hmm…

Maybe try doing a text resize instead, and set the transition for “Font-Size” & Line-height (might not need the line-height one):

Thanks,

Waldo

#11

Waldo, sorry for the late reply. I want to try and figure out what’s going on here because doing a font resize doesn’t animate the same way as the scale, and until I get further evidence I’m doing something wrong, I am suspecting a bug. Here’s why I’m feeling like it’s a bug. I have a fade in and move down on load interaction attached to the menu items. When I select None in the Objects tab for interactions, the scale on hover works.

I figured this out because I added a new NavBar below the first one and put the same class onto this second NavBar’s Home menu item, and tested out the Hover Scale and it worked. With it selected, I then went to the Objects tab and selected the Interaction I had for the first NavBar’s Home, and the scale on hover stopped.

So, the question is, Do Interactions added in the Objects tab break Hover states added in the Style tab? Can you please investigate this?

#12

Don’t know why I didn’t think of this earlier, but just add another interaction for hover for the scale, and keep the font change for the hover in the styles menu.

Does that make sense? That should take care of it. :smile:

#13

You mean keep the font color change on Hover as a part of the class in the Style menu, right? Yes, I do see that the scale on hover works as an interaction, but…this is what I’d like to know: Is this supposed to happen in Webflow?

Why does the font color change on hover as a part of the class not get broken by the interaction, but scale on hover does? Can this be engineered not to break? I’m also starting to wonder if it’s a little weird to be able to add Hover states in two different places in the UI.

#14

Maybe @PixelGeek or @cyberdave have some insight to offer on this subject.

#15

have you tried removing the hover interaction and using the hover state settings?

#16

Nelson, William, here is the link to my work in progress sample. https://preview.webflow.com/preview/scindoyan?preview=b1d44ed1a23922be13a8c9df48902a91

I’m trying to figure out what’s going on with the Scale on Hover. Nelson, I think your last recommendation in this thread, above, is incorrect. I think adding the Scale in the Hover State, to the class, in the Style tab, is what’s not working. It actually does work, when adding it, after the the fade down combo I named “Flyin” as an interaction, in the Objects tab. When I try and add the scale to the Hover State in the Styles tab, that’s when it doesn’t work. If I disconnect the Flyin interaction from the menu item, by selecting “None” in the interactions, then the Scale on Hover state effect works.

Interestingly, when the Flyin interaction is hooked up, you can’t see it animate in the design mode, but you can see it in the Preview mode. When Scale on Hover is added via the class, in the Styles tab, it does animate in the design mode.

The font color seems to be unaffected by the Interaction. Only the Scale effect.

#17

Hi @elcalibano, the interaction on the element is cancelling out the hover scale because those are separate events, and not queued.

I believe that is what is happening in this case, I am continuing to look. I would not use scale on the hover state in this case, but rather use scale as part of an interaction.

Cheers,
Dave

1 Like
#18

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