▼
Streaming live at 10am (PST)

Resolved: Hover state only instantaneous-transitions not working; followed two different tutorials

Design help General
#1

Following two different tutorials found on webflow.com I can not seem to get the Hover state to transition according to the milliseconds I specify. I am practising creating a hover state transition on a regular div block. I have the background of the div block changing from one gradient to another gradient with different colours, however it is instantaneous rather than taking the time as shown in the Tutorial videos.

Found the problem: It can not transition from a gradient background to another gradient background gradually over time. It can only do it instantaneously.

#2

Also note that scaling **does** follow the transition time rules.

**Edit:** *Scaling* now only works when I am working on webflow. When I click on preview it doesn't work and instantaneously scales.
#3

are you applying the changes to the hover state?

#4

Do you mean the transition time? It says that you can only apply it to the regular state.

If you mean did I change the colours so that there is a noticeable change then yes I have already done that.

The literal message I am seeing when I try and click onto transitions is :

“Transitions are disabled on hover/pressed/focus states. Instead add a transition on the default non-state class.”

#6

Found the problem: It can not transition from a gradient background to another gradient background gradually over time. It can only do it instantaneously.

1 Like
#7

I’m still learning the ropes of all this too, good to know you found a solution haha

#8

Hi @borrowingyourhumvee, I was trying to follow this post based on the description, but I am not really sure how you have the page setup. Do you have an example site you are working on, with a read only share link that perhaps I might be able to take a look at? What is the element class that has the hover state or the background gradient you are trying to change on hover?

Here is more about read only links:

http://help.webflow.com/general/support-guidelines#how-do-i-share-my-sites-read-only-link

I am happy to go take a look a this if you are experiencing an issue. There might be another way to accomplish this.

Cheers, Dave

#9

Hi Cyberdave,
Sorry for the long delay in responding here. I have resolved the issues. Thanks

#10

More things about the resolution: Just to add to what has happened. If the preview does not show the proper actions (like scaling, changing colour, etc.) exit from preview and re enter. I think it is just a bug or something.

#11

I’m having trouble with transitions and this does not resolve my issue. I am attempting to modify the transition time of changes in the width and opacity of an element on hover. However the opacity is non-existent and the transition time for the width transformation is instantaneous.

I’m on apple safari 7+
website is: http://aspect-functional.webflow.com

Does anyone have any suggestions?

#12