Skip to main content
G
Gry25501990monb
Participant
August 25, 2022
Question

Shadow effect via Expression in AE

  • August 25, 2022
  • 3 replies
  • 773 views

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

This topic has been closed for replies.

3 replies

R
Community Expert
Rick GerardCommunity Expert
Community Expert
August 25, 2022

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.

    G
    Gry25501990monbAuthor
    Participant
    August 29, 2022

    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 🙂

    Mylenium
    Mylenium
    Legend
    August 25, 2022

    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

      D
      David Arbor
      Inspiring
      August 25, 2022

      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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices