How to animate shadows in Webflow
If you’re looking at how to animate a shadow in Webflow, you’ll likely come into a bit of an issue.
I’ve recently come into this issue, so thought I’d share this post. The issue I had involved a 3D phone animation. On page load, I wanted the phone to animate. With the 3D element, it required the shadows to change on the roation of the phone. In a hover state this wasn’t a problem.
Animating on page load, or another element trigger - I realised wasn’t so simple.
As of now (July 2019), Webflow allows you to animate the shadow through different states of the element. This means that you can animate shadows on things such as hover states.
What’s the fix?
In short, you can’t animate shadows as you normally would with other properties in Webflow.
TLDR: Create separate shadow elements and swap them out.
What you can do is fairly straightforward but may take a bit of time.
For this example, let’s suggest we’re animating from point A to point B. Phone rotates, shadows rotate with it also.
- First off, you’ll likely want to remove the shadows from the element you want to animate (remember the shadow style properties, you’ll need these still).
- Second, you’ll want to create two additional elements (or more depending on the complexity of the animation).
- Make these elements the same dimensions of your original element.
- Take the first and add the initial state of your first shadow. This will be displayed at the start of the animation.
- The second element should be the shadow at the end of the animation. The initial state of this will be 0% opacity.
Note: these elements will likely be positioned absolute to the original element you’re animating.
when creating your animation in Webflow:
- Animate the rotation/movement of your item
- Start with the initial shadow at opacity: 100% and reduce it to 0%
- Animate the finishing shadow from 0% to 100%
All we’re doing here is swapping out the different shadows.
And this, in my opinion is the solution to wondering how to animate shadows in Webflow.