Animate Box Shadow outside/inside

[TechTailor (Ben Erler)]

Hi,

is there a way to transition from an outside box shadow to an inside box shadow?
Example:
Element trigger: Mouse click (tap)
1st click: Start an animation
In the animation: Transition from an outside to an inside shadow
2nd click: Start an animation
Reverse the animation

Is there a solution to do this?

Thanks in advance!

[choreus (Julian)]

Hi @TechTailor, as of right now, you can’t manipulate box-shadow with Webflow interactions (Mouse click tap). If applicable for your use case, you could realize a transition on hover.

How to animate box shadow

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.

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.