Streaming live at 10am (PST)

How to animate box shadow


#1

One the Webflow Interaction feature page, there is an example that shows the background shadow animating on hover, but I can’t find any tutorial on how to do it! Can this be done by just using interactions, or do I need to whip up some custom code?

See the Build microinteractions around mouse movement example on the Interactions page for the shadow rollover example.


#2

Take a screenshot on which part you’re referring to.


#3

These are just different attributes of the objects’ states. Select an object with the shadow that needs to be different on mouse hover, change state of the object at the top right corner in the designer to be “hover”, modify your shadow. Then in the “none” state modify transition parameter (at the bottom of the style bar) for the element so that shadow change is smooth. That’s it.


#4

I’m trying to get this to work as well but the pulldown menu under transitions only shows: Opacity, Margin, Padding, Border. How do you apply the transition parameter to drop shadow?

Thanks!


#5

Oh nevermind…just realized that the dropdown menu actually scrolls…why is it so short as to display only 4 items and has no indication there are more on the list?