Hi, I’m wondering if I can have a nav link current state appear gradually, with a 500ms ease or something? I’m making the font size bigger and adding a border, which is a very stark change when happening instantly. The only way I can think to do it is kind of a hack — removing all current state changes and creating scroll trigger changes to the nav links instead.
Sorry if this is an obvious question. I’m re-familiarising myself with Webflow, it’s been a while!
Here’s my site.
In CSS you don’t say “Make this element gets this style (bigger with border) gradually”, but rather “Make this element transition for those specified properties” and " Make this element gets this style".
All element can get CSS transitions on as many transitions as you like (in our case we’ll define transition 500ms ease for text size and borders). It’s also possible to make the element transition on ALL properties but it’s strongly not recommended (performances issues).
Once an element has transitions defined, any change of style for those properties will be animated from start state to end state. So the delcaration for transitions and style are totally not connected.
Adding transitions for font size
http://vincent.polenordstudio.fr/snap/tbtsn.jpg
Great controls for easing mode
http://vincent.polenordstudio.fr/snap/2cpa0.jpg
Settings with the 2 transitions added
http://vincent.polenordstudio.fr/snap/lkkg1.jpg
Now, any changes applied to this element, wether it’s a hover state, a current state, a click state… should happen gradually, over a span of 500ms, with Ease.
Thanks! I knew it must be in there somewhere!!
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.