Learning animation with After Effects and LottieFiles: Why can’t things just be easy?
A comprehensive list of things that I discovered you can’t do easily while creating a “simple” animation for my portfolio- and the solutions I found to get the results I wanted.
Let me be clear from the get-go: I am not an expert on any of the things I’m about to discuss. In fact, I’m actively learning these skills.
That being said, I do know the basics of animation theory and I have created very simple motion graphics using After Effects.
As part of my ongoing journey to improve my UI design skills, I decided it was time to learn more about animating. Animation is useful for a variety of work- creating website graphics, user tutorials, interactions and transitions in apps, etc. I already knew about After Effects. I recently learned about LottieFiles as well- it’s a plugin/file format for creating small, easy-to-implement animation files for web and mobile.
Since I’m also learning Webflow to create a UX portfolio, and Webflow can use Lottie animations, I decided it would be a great opportunity to create a little animation for my home page. That’s efficiency, Kyle!
Since my UX portfolio will be specialized in Visual Design, I wanted to create a UI-like design for my animation. I grabbed my iPad and sketched up a rough idea in Procreate.
My idea was to create a transparent card in the glassmorphism style, with a fun blob behind it to showcase the blurred background effect. On the left of the card would be a color palette of 4 swatches, with a simple gradient slider bar underneath. To the right would be some basic UI buttons. I didn’t want to get crazy with the animation, so I decided to animate only 3 elements. Animations 1 and 2 would be a swatch and the slider bar. As the slider moved through the gradient, the swatch would change to match the color shown in the slider. When the slider hit my specific brand color, animation 3 would occur and the “heart” icon would activate. After a short pause, the button would go into the “off” position and the slider would move again, creating a little looping animation.
Sooooo simple, right? I figured I would be done in an hour or so.
Aaaanyways, I created my design file in Adobe Illustrator because Lottie works with vector graphics. I made all my little elements, added some drop shadows for that UI visual separation look, and figured out how to create a background blur for the blob behind my card. I carefully grouped and named my layers to make animating in After Effects easy, and uploaded my file.
My Illustrator file uploaded perfectly, with all my layers named and grouped. Except- something was wrong. My gradient slider bar was in greyscale instead of brown and black. A quick Goog informed me that After Effects doesn’t support gradient imports from Illustrator. I definitely needed to figure out how to fix that. Luckily, Google also informed me that some great person was selling a plugin that made exporting illustrator files to After Effects simple- with gradient support and some other cool features too. It’s called Overlord and yes, I paid $45 for it immediately.
With Overlord installed, I pushed my file from Illustrator over to After Effects again and low and behold, a perfect gradient!
However, I noticed that the drop shadows and blur effect I applied in Illustrator weren’t working out. After Effects rendered them as part of my graphic, instead of a layer effect. I turned them off in my Illustrator file and re-pushed to AE. According to the Lottie documentation, I could add them as layer effects in After Effects instead. Things were going smoothly until I added the drop shadow to my transparent card. In Illustrator, a drop shadow is rendered as separate from the element. If the element is transparent, you just see the shadow below or to the side. After Effects treats it as a real-world object- you see the whole shadow behind the shape, making it grey looking.
Back to the drawing board! After a whole lot of fiddling around, I came up with this arrangement of my shapes in Illustrator-
- A full background blob shape on bottom
- A white, opaque card shape (drop shadow added in After Effects)
- A cut out “middle” section of blob shape (blur added in After Effects)
- A transparent “glass” card shape on top
I added drop shadows back in Illustrator for this vid so you can see better.
Putting the drop shadow on the opaque white “background” card meant that I could leave the top card transparent. One thing that I was pleasantly surprised to learn is that the Gaussian blur effect in AE worked better for my purposes. It allows you to choose if you want to blur horizontally, vertically, or both. Since I wanted this card to look like frosted glass, I applied the blur to the horizontal only.
I was finally ready to get started animating! This part actually went pretty smoothly. It took a little while for me to make things happen at the correct time and move well, but no technical difficulties.
Then the next trouble arose. I exported my file with the LottieFiles extension and checked it out in the viewer. Hmmmm- all my drop shadows were cropped in a strange way. A frustrating tour around the internet showed that other people experienced this problem as well. Seems like Lottie crops the layer effect to the dimensions of the object.
There’s one measly mention of this in the Lottie documentation- and it gives no practical advice for a non-coding n00b like myself. Where does one add this code? In AfterEffects somewhere? The .json file? I have no freaking clue. I spent a long time vainly Googling terms like “where to edit render settings code LottieFiles” to zero effect.
I even emailed support to ask for help. Unfortunately, I have not heard back from them yet.
So, I decided to come up with my own solution. It’s not elegant but it does the job.
I created boxes behind each of the elements I had a drop shadow on with zero opacity fills, in the same layer but underneath the element. This essentially means that the renderer will read each layer as the size of the biggest object- my transparent shape. This method worked great!
I finally had my animation looking exactly like the mockup I made in Illustrator. I was so excited! But the troubles were not over, friends.
After exporting my file again and previewing it in the Lottie viewer, I noticed that the mobile view didn’t show any of the blur or drop shadows I had fought so hard for.
Back to Google! And yep, turns out Lottie doesn’t support layer effects on mobile view. So, my animation would look clean and perfect on a web version of my site- but like a potato on mobile versions.
Since there’s absolutely nothing I can do about this, I decided to use the static images of my mockup on mobile views of my website. It still looks really nice, after all.
Check it out!
Although it was quite the process, I’m really pleased with my animation. It looks exactly like I wanted, and I did learn a lot. I will definitely make it easier on myself and leave the drop shadows and blurs out next time!
We learn wisdom from failure much more than from success. We often discover what will do, by finding out what will not do; and probably he who never made a mistake never made a discovery.
— Samuel Smiles
Cheers, Rachel
