His colorful and creative animations can be found on LottieFiles and in packs on the Marketplace. Motion designer David Probst Jr isn't one to shy away from a challenge when exploring the animation possibilities with Lottie, and when it comes to animation he will take on any foreign terrain with hungry curiosity. In this interview, David shares his journey with Lottie and thoughts on the future of interactive design.

David, tell us a little bit about yourself.

For the past 6 years, much of my life has revolved around motion design, but my love for all things animated goes way back. Disney movies, anime, video games; I’ve always been attracted to the medium’s ability to inform, tell stories, and capture the imagination.

My creative journey began in St. Louis, and my work has always oriented around creating explainer videos, logo animations, and social media content for local businesses and agencies.

I moved to Colorado a year ago, and around this time is when I started diving deep into Lottie! Interactive animation is an intriguing category of motion that doesn’t seem to get a lot of attention in the mainstream motion design community, but this is quickly changing. Sure, an animated video with music, killer animation and seamless transitions is easy to appreciate, but the only way to interact with a video is to watch it. Lottie animations can be watched, clicked, swiped, scrolled, and used in all kinds of creative ways. This is what inspired me to explore the possibilities!

My goal with this was to create a web-only animation that felt fairly detailed without sacrificing file size. I explored using the Gaussian blur effect with Lottie to add glows and shading, which in moderation worked great, but quickly became a performance killer. Instead, I decided to stick with gradients and masks. In the end, this scene landed at 173kb, which is not too shabby!

Since then creating Lottie animations has become a growing part of my business, and sharing my explorations on LottieFiles has enabled me to connect with talented folks from all over the world. The Lottie community is growing quickly and I’m happy to be along for the ride.

In my spare-time I try to enjoy the best of both the digital and natural worlds. You'll probably find me behind the computer jamming on some personal projects or somewhere outside with my feet in the grass. My ultimate definition of fun is backpacking in the mountains with my friends; there's nothing like a breath of fresh air at 14,000ft! I have an indoor aquaponics garden that grows some tasty vegetables, and my cats regularly take naps on my keyboard.

A sample from the premium collection of impossible geometry animations. Perfect for loading screens or simply use them as mesmerizing design elements. Each animation is made up entirely of 2D shape layers, but gives the illusion of endlessly twisting 3D geometry.

How did you discover Lottie?

At the time, I had a project come in requesting 4 loaders, delivered as GIFs and with a max file size of a whopping 4mb each. These were fairly elaborate loaders and I battled all of the typical pain points you’d expect to experience when converting an animation to a GIF. I hit Google in search for better ways to optimize and came across an episode of the “Fragmented” podcast where they talked about this fancy new thing by Airbnb called Lottie. My mind went from fighting against the raster based shortcomings of a GIF to seeing crisp vector shapes animating effortlessly across a new realm of interactive freedom…in other words, it was pretty mind blowing and I was curious to learn more!

A humble dot cluster loader.

What have you found are the greatest benefits of Lottie?

As I mentioned above, Lottie answers all of the pain points I’ve ever experienced creating GIFs. A GIF is raster based, the file size is big, the quality takes a hit from compression; I can’t really think of anything positive.

Lottie animations are vector based, a fraction of the file size, and the animation looks just as good on the website/app as it does inside After Effects! The side-by-side comparison alone is a great way to immediately visualize the benefits, but there’s more to it than just better features. By optimizing the animation to development workflow Lottie has become a collaborative solution to creating better user experiences.

The conversations I have with people feel more inspired because of the possibilities. When I hand off a rendered json, the person implementing the animation can still customize so much about how it looks and reacts in the environment. This definitely makes things more fun for both parties.

For this animation I used looping expressions and some path pick whipping. For a web only animation, this seriously reduces the file size, and I probably could have knocked it down even more!

How do you push the limits of Lottie?

On LottieFiles, a lot of my posts are technical explorations inspired by curiosity. There’s a lot of ways to accomplish a single task inside of After Effects, but with Lottie you have to ask yourself, is this possible with the supported features? Is this method compatible across all devices? How will the decisions I make affect the file size and performance? Working within a set of constraints can be a lot of fun, and I like to pick challenging ideas like liquid or character animation to see how far I can push past the perceived boundaries of what’s possible with Lottie animations.

I had some fun making this blobbly liquid loader thingy!

How have tools like LottieFiles for After Effects changed things for you?

Stacking shapes loader. Available in my Marketplace pack of simple shape loaders.

I’m a big fan of any tool that speeds up my workflow and the LottieFiles plugin does just that.

Before, I had to render out my animation in order to check file size then drag it onto the LottieFiles site every time I wanted to see how things were looking. This could become tedious when troubleshooting; I would have to adjust settings in After Effects, render, upload to LottieFiles, and repeat over and over until I solved the issue.

Now, with the LottieFiles plugin I can accomplish all of these tasks right inside of After Effects -- saving me time while making the whole process more intuitive. Optimization is also key factor when creating Lottie animations so extra tools like the Render Graph really come in handy when your trying to minimize file size and boost performance.

What do you see as the future of interactive design?

I remember a time when having a video on your website was far less common, and businesses that invested in video were considered forward thinking. Now, video is an essential communication tool that almost all businesses are leveraging in some way. Why? Most users would rather watch a 2 minute video than read a gigantic block of text, it requires less effort, and the message is often absorbed more effectively. I feel like interactive design is moving along a similar trajectory when it comes to motion.

At the moment, there are still a lot of companies that either don’t know about Lottie or just see animation as icing on the cake. As it becomes more widely adopted I can totally see a shift in mindset; clients wanting to engage their audience with animation, and users subconsciously favoring websites/apps with this added level of detail, much like we’ve seen with video. Who knows, maybe someday the lines between interactive experiences and video will begin to blur.

Icons compilation

Our brains are wired to respond when we see motion, which is why a moving image will keep out attention longer than a static image. As we continue to explore the potential of Lottie, I think animators can help find new ways to integrate motion that captures attention with meaning and purpose; motion without purpose runs the risk of becoming a distraction.

And lastly, the web design agencies that I’ve connected with so far don’t have a motion designer on staff, which is where I come in! As things progress, I can see some motion designers moving in- house and becoming valuable members of the team. Deeper levels of collaboration could be really beneficial and help create harmony between animation, static elements, and the dynamic interactions of the user experience.

Hungry for more? You can read David Probst Jr's animation design inspiration and tips here.

And see his work on his LottieFiles profile and his website.