Shadow effect via Expression in AE

New Here ,
Aug 25, 2022 Aug 25, 2022

Copy link to clipboard

Copied

Hi guys,

 

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 🙂

 

Best, Gee

TOPICS
Expressions

Views

50

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 25, 2022 Aug 25, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 25, 2022 Aug 25, 2022

Copy link to clipboard

Copied

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.

 

Mylenium

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 25, 2022 Aug 25, 2022

Copy link to clipboard

Copied

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:

RickGerard_0-1661450313701.png

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 29, 2022 Aug 29, 2022

Copy link to clipboard

Copied

LATEST

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 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines