August 6, 2024
Livelink CDN, how we serve Lottie animations to millions of users monthly
We released our Livelink CDN feature a few weeks ago and have already seen it massively speed up how our customers create and ship animations to their websites and apps.
Lottielab Livelink now serves Lottie animations to millions of end users and our customers are continuously raving about it—from its ease of use and the tiny file sizes it outputs, to how seamlessly it works across various production platforms.
But what makes Livelink so special and why is it being adopted rapidly by Lottielab customers?
While animation can massively enhance the user experience of a website or application, it takes considerable effort and expertise to implement it in a performant way.
Previously, creating the animation itself required proficiency in tools like After Effects, with an interface that is too complex for the needs of most designers. After that, how do you get feedback on the animation from the rest of your team? How do you get it working on your app or website? How do you ensure it’s performant? How do you update the animation if you need to make changes and iterate?
These are all questions that have frustrated our customers in the past. From navigating the complexity of animation tools, to the programming knowledge required to implement animations in products.
There are also several factors to consider such as ensuring the file sizes are small and won’t lead to performance issues, collaborating by sending files back and forth, and then testing them on the appropriate platforms to see if they work or not, only to find out something is broken and you need to go back to square one.
As designers and developers ourselves, my co-founder Alistair and I deeply resonate with this pain and set out to build Lottielab as the ideal animation tool for product teams, helping them implement performant animations in their products seamlessly.
Since launching Lottielab into public beta late last year, thousands of top design and engineering teams have shipped animations to their apps and websites faster than ever using Lottielab.
As an editor, Lottielab has become the best-in-class way for creating and collaborating on product animations. However, beyond making the animation creation process simpler, there is still the broader challenge of simplifying the Lottie workflow and making it easier to test and implement these animations on live websites and apps. That’s where Livelink comes in.
But how does it work?
Lottielab Livelink significantly simplifies the animation hand-off and implementation process in three main ways:
Publish animations with a single link and one-click:
You’ve finished creating your animation masterpiece and are super excited to get it working on your app, but now you need to figure out how. What documentation should you read? What code snippet should you add? What Lottie player should you use? What format should you download the animation in? And various other jargon to wrap your head around.
With Lottielab Livelink, this is seamless. Once you are done importing, creating or editing your animation in the Lottielab editor, you can see how it looks live in production within seconds.
Simply click the ‘export’ button at the top-right of the editor and copy/ paste the asset’s ‘Livelink’ into your app or website code, or follow the instructions for any of the numerous platforms already supporting Lottie animations.
Once you’ve pasted this link into your code, your Lottie is now live. It’s really that easy.
Reduce Lottie animation file size by up to 100x, Livelink produces the tiniest Lottie file size ever:
As a designer, you want to spend time focusing on what makes the animation great, and getting straight to its impact on the user experience. But animations can be resource intensive on an app or website’s performance, and your developers won’t have any of it.
You either get the animation smaller or it won’t be implemented. So now you need to worry about redoing parts of the animation to reduce the file size? Not with Livelink.
Lottielab Livelink CDN reduces the size of your Lottie by up to 100x smaller without compromising on quality, with a built-in state of the art compression and optimisation technology purpose-made for Lottie animations.
This means that as a designer, you can focus on animating freely without obsessing with the number of layers or keyframes you have, letting Livelink do the heavy lifting of making sure it’s as optimised as possible on export.
Test and update animations easily with live version control.
It’s difficult to be completely certain of how your animation will be rendered on your app or website before actually seeing it live in app.
What if something is broken in it or a mistake was made and you need to update the animation after it’s been shipped? Normally, this would involve designers and developers going back and forth, the designer sending multiple versions of a file for the developer to keep replacing in the app. With Livelink, this entire process becomes redundant.
Once the url is in your codebase or target platform, you can change your animations on the fly and publish the new versions directly from your Lottielab editor, and see them updated live on your site or app in a single click.
With Livelink, we’ve improved how animations are integrated into digital products, making it easier, faster, and more efficient than ever before. Whether you’re a designer focused on creativity or a developer concerned with performance, Livelink offers a seamless solution to meet your needs.