▼
Streaming live at 10am (PST)

Loop a Shadow Animation?

Design help Design inspiration
#1

Hey, I’ve just started using WebFlow today.
I’m pretty much experienced with development and especially with design but I’ve encountered an issue when trying to animate a Button-Shadow.
Can anyone explain how can you create a never-ending Shadow-On -> Shadow-Off loop on a certain element?

Thanks!

#2

Im looking for this as well, does anyone know how to do it?

The interactions menu only allow us to manipulate the shape and opacity, but not colors, shadows and etc.

Cheers

#3

Webflow does not support those properties as yet out of the box in interactions v1. You can use a second div with a blur filter set to achieve the shadow effect you want.

#4

@FrozenGod it is possible to achieve this as @AlexManyeki suggested.

I would suggest using keyframe animation in the custom code editor. For example:

@keyframes glow {
0% { box-shadow: 0 0 -10px red; }
40% { box-shadow: 0 0 20px red; }
60% { box-shadow: 0 0 20px red; }
100% { box-shadow: 0 0 -10px red; }
}

.glowing-button {
animation: glow 5000ms infinite;
}

Hope this helps @FrozenGod

3 Likes
#5

@UrbansoulDesign -> Better and cleaner option.