I was wondering if anyone know if it is possible to make a shadow effect on a shape via an expression in AF? I am trying to make an SVG animation using bodymovin and lottie and as is not possible to use AE effects on an SVG animation so I was wondering if there is any other way to make a shadow? It is a very important detail in my design.
Thanks for your help 🙂
Expressions can't create pixels, they're snippets of code that control parameters. You can use AE effects if you render out images to your Lottie file, but that's often not ideal. To make a fake shadow, you can duplicate your layer, parent the duplicate, offset it a bit, and tint or fill the layer with black. This will create a faux hard shadow.
Lottie has a lot of limitations and the platform you plan on delivering to will dictate which features are supported and which aren't: https://github.com/airbnb/lottie/blob/master/supported-features.md
AE is the wrong tool if you need SVG filters or CSS styles like drop shadows. Except for adding such stuff after the fact in the SVG code, you have to use other tools like Animate or online animation tools for SVG/ HTML canvas. Bodymovin'/ Lottie can only transalte actual path and transform information.
You can use an expression to move a copy of a shape layer down and to the right by tying the Shape Transform properties together. That will keep everything vector. If you add blur or any effect to the layer, the vectors are gone.
It would help me help you if I could see a timeline with the modified properties of the shape layer you are trying to animate showing. Select the shape layer, press the "u" key twice and drag the screenshot to the reply field so I can see it instead of downloading it.
This is a Shape Shadow at the most basic:
You can also tie the Transform Shape Shadow to a baseline value and simulate a 3D environment with the shape moving above the floor. It's doable; you just have to be creative.
I've uploaded the project file.
Thank you all so much for taking your time to reply me. I am a total newbie on svg animations!
I have one last question some of you might be able to help me with. If I add the shadow in illustator as an SVG filter effect - will I then be able to bring it over to AE with the rest of my illustration and then to lottie? If not I will use one of you guys's solution. Thanks again 🙂