I’m adding transition effects for various elements on my page - hovering on icons, toggling menus, etc. I have a sidebar with repeating group elements, and I’m trying to get the box shadow to smoothly transition from outset to inset. The change happens on hover, but it’s instantaneous, and seems to ignore the transition I’ve set. I’ve tried setting it up both in the visual editor and in the style editor, and it’s instantaneous both times. Any suggestions?
Hi there!
Great question! The inset and outset properties unfortunately don’t support transitions like this at this time. However I do have an alternative for you. If you instead try to transition a different shadow property like Blur radius, Spread radius, and the offsets you can achieve a similar “floating” visual effect. Here’s a link to a quick demo of this, the left box is set up as you have it now the right box is set up as I suggest. Included below is a screenshot of the hover condition for this. Let us know if this helps!
1 Like
Make sense. Thanks!
This topic was automatically closed after 70 days. New replies are no longer allowed.