Self-taught designer Chethan KVS stumbled across Lottie as it first arrived on the scene. Hooked by the notion that you could create an animation that could be scaled up without pixelation, and simultaneously perplexed and curious about how on earth this could be done, Chethan dug deep into the world of Lottie and learned all he could about it.
Tell us a little bit about yourself and how you found yourself doing motion design?
I work as a Product Designer, which means I deal mostly with screens which is very UI and UX based, but motion design, graphic design, film and video making is something I’ve always been interested in since I was in school. I think I’ve just always had an affinity to more creative outlets. I actually wasn’t introduced to product design until about 2 years ago.
It turned out that motion design was something that I really liked, and for the most part it was something that I became fairly good at. I started off trying my hand at making short films, movie trailers, and playing around with visual effects. Today I still do lots of motion design, most of it I do for work, and I upload my work on Dribbble and YouTube to share with others.
How did you come across Lottie animations?
I don’t remember exactly when and where I came across Lottie but I’m going to guess it was probably on Twitter because I’m super active there and it seems to be the place I get all my information. I remember not knowing what an SVG really was, what did it stand for, what were its benefits and what was it used for. So I took the time to do a little research and learn more about it and this was probably how I came across the mention of Lottie animations. This got me really interested because I just couldn’t understand how it could be possible to make animations that don’t pixelate when you scale them, it didn’t make sense in my mind because I had no notion of the concept of Lottie yet. As usual, curiosity overcame me and I kept reading and reading on everything I could find on the internet about Lottie animations, and eventually I began to figure out what Lottie was and the power behind it. It was no easy feat because during my initial stages of learning about Lottie, there wasn’t a whole lot of in-depth information out there so much of my learning was based on trial and error when using Lottie.
What was it like using Lottie animations in the very beginning?
Even when we first began using Lottie animations at the company I worked for, we faced a lot of challenges at the beginning, we’d get the animation to work perfectly on the computer but then when we implemented it on mobile it just wouldn’t work right in the app. I didn’t have a clue why the animation was breaking when in the app. The developer and I had to do a lot of digging here to figure out what was happening, and eventually learned that you couldn’t use things drop shadows, complex masks, etc, which in hindsight was a really useful learning for me because it was a great way for me to find out more about the differences between the capabilities for the Lottie mobile players.
Thinking back it makes me laugh a bit because when we made our first animation I put in a tonne of gradients, track mattes, masks, drop shadows, and we made it look so beautiful only to realise many of these components would not work so in the end we had to strip down the original animation.
How has Lottie changed the way you approach designing your products?
One thing that really changed was getting ideas on how to make your product more fun and more lively, as a designer before when you had to think of animation you had to keep the developer in the forefront of your mind and you’d know that it would be a real pain for a developer to manually code an animation into a product. This led to us avoiding using any animations in our products because it just didn’t seem like a viable possibility especially for us designers many of who don’t have a clue how to code an animation. But now Lottie is in the picture, it has opened up a lot of ideas and concepts as well as removed the limits of designers who can now have an idea and implement it ourselves without having as much dependency on developers.
How do you go about sharing your animations with stakeholders at work?
Usually those I need to show the animation to like to see it in context, meaning that they like to see it interacting in its product environment, so typically I would create mockups of it in action on the website or in the app. I like to create MP4s of these mockups that I’ve put together using Figma because it’s fairly easy for my stakeholders to play and then give me feedback. Screen mockups are important as they help give people context and this allows them to more easily visualise how things are going to interact together in terms of size, spacing and colors.
When LottieFiles for Figma came it, man I thought it was great that I could now turn my Lottie animation into a GIF and then add it to my Figma designs. I now just mirror the frame on my phone using Figma Mirror and easily show it to the stakeholders involved so they can see exactly how things are meant to look on mobile.
I also use Figma.AEUX which exports Figma frames directly into After Effects which means I don’t have to manually do much because Figma.AEUX gives me a JSON file which I can just open up in After Effects, it imports everything in vector format which is great.
Sounds like you’ve taken work away from the developers!
In my work, the developer doesn’t actually use any of the Lottie tools, it’s actually just me as the designer who is using all these...all the developer wants is the Lottie file to implement it. It’s really empowering for designers like me, I mean it’s fun creating Lottie animations, like why would I want to give that part away to the developer?!
Lottie animations are becoming so easy for just about anyone to implement, this can be especially seen in the use of them in things like Webflow. I’m a hardcore user of Webflow so I know how Lottie integrates with Webflow, it’s really awesome as there’s nothing you can’t do with the two together, it’s phenomenal.So where do you get inspiration for the things you create?
The way I take inspiration is by watching movie trailers, game trailers, product release videos by big names like Apple, Google and Microsoft. While I may not be able to replicate their work quite yet, it’s a great starting point for ideas that can grow into something more. Staying in tune to what’s being created in the motion design sphere really helps me stay in the head of a motion designer.
When I’m seeking inspiration for product design, I usually go to places such as Mobbin (these guys have the best repository of real apps), Land-book, Awwwards, One Page Love. I also like to turn to the apps I use on a daily basis, usually the apps we use a lot are our favourite for a reason and I generally know that these will have pretty solid UX design. When it comes to UI, generally I find myself on Dribbble, there are a tonne of great minds on there and lots to get inspired from. And of course LottieFiles has new animations being uploaded by designers everyday so that’s also a great place to find ideas.
If we’re talking about individual designers, the kind of people I admire are those that aren’t just designers by trade but also by passion. I identify these as the people who can’t help but animate even during their time off, it’s not a job to them it’s a true hobby. I also like to follow designers who are always sharing content around design, not just their own stuff but sharing the work of others too, the kind that don’t like to keep information to themselves but who share it to help benefit other designers that follow them.
Andreas Storm is one designer in particular who is always sharing such awesome stuff. I’m always excited to see what he posts because he rarely disappoints, sharing cool concepts, product videos, and designs from other designers.
As a designer myself, it’s great to start new conversations with like-minded designers who can help open my eyes to different concepts and ideas, I really enjoy talking to them if I can get the opportunity to so that I can ask them how they approach things, what tools they use, how do they manage their time and priortize projects. A lot of them have families and are in high performing jobs so I’m just amazed at how they do it all, I’m not where they are yet and I couldn’t imagine juggling it all like they do.
What would you advise any designers who are just getting started with Lottie animations?
Today I know a lot of the constrictions and restraints that come with creating certain Lottie designs, so through trial and error I’ve learned what can and what can’t be done. So anytime I need to come up with an animation or a design I already know what is not going to work and therefore what I should avoid. I’m grateful to the folks at LottieFiles who responded when I reached out to them asking for help, they sent me this documentation put out by the developers at Airbnb which had a list of all the effects After Effects has showing me which was compatible with Lottie and which was not.
What I would tell designers, is that the most important thing is really to read up on the documentation because it will save you a lot of hassle in the long run. You don’t want to spend a great deal of time (like I did when I first started) putting so much effort into a beautiful animation only to find out that it just doesn’t work when implemented into code. Another great thing to do would be to go through the animations on LottieFiles and see what’s the pattern in animations uploaded there, it will help you get a sense of what is possible...and vice versa, if you have an idea for an animation but you don’t see any animations like it on LottieFiles, then that’s probably a pretty clear sign that maybe that idea isn’t possible with Lottie just yet.
Another tip that I think would be great for someone just starting out with Lottie animations would be to sort of reverse engineer an animation. On LottieFiles some animations there come with the AEP file (their After Effects source file) which you can download and open in After Effects. This allows you to see how the animation is structured, what shape layers are there, and the effects used in that animation.
Keep creating and testing things so that you yourself can also figure out what works and what doesn’t, it is really helpful to learn by doing. Definitely check your animation as you go, step by step on both your computer and mobile. After every change you make, render it in the LottieFiles plugin and check all is good, if something doesn’t look right then you would know exactly what effect is causing your animation to break. This method of testing may seem tedious but I find it’s actually a great method if you’re just starting out to figure out what is possible and what is not.
And of course, always test your animations on mobile and not just web to ensure that your animation works on both devices.
Any advice for those out there thinking of trying their hand at motion design?
If there’s anyone out there thinking of getting into motion design, I’d really encourage them to just go for it. A motion designer is a far more valuable individual because it’s like getting a 2 for one, you get a graphic designer and a motion designer! Being exposed to more domains of design I feel gives you a better perspective and really helps you put together ideas, and I always tell people this but really, the more skills you have the more value you have as a designer. Especially now that Lottie has made it so easy and empowered designers so much more, I definitely think it’s a skill one should develop because now the horizons are broadened. When it comes to Lottie, you don’t need to be an expert to get a good handle on it, though I would say that it’s learning After Effects that has the steepest curve. But honestly, as scary as After Effects may seem, even that can be learned, just tackle bit by bit every over 2 weeks and you’ll have a good grasp.
So I’m a self taught motion designer, I don’t have any sort of formal education in design. The way I taught myself was through everything that I could find that was available for free online. There’s a lot of resources out there to help you learn After Effects so I really wouldn’t recommend paying for a course because there are people out there who have taken the time to lay things out nice and clearly and have put it up on YouTube as a free resource for people trying to learn. Watch these videos and recreate what they’re teaching and you’ll find going through things step by step will be super helpful as a learning process. Anything new that comes up in After Effects, you can guarantee that someone will eventually cover it in a YouTube tutorial so you’ll never be kept in the dark for long.
You can follow Chethan here and see his work:
