Posted on Jun 14 Before you begin reading this article, please take 15 seconds to visit the what is lottie? page. It's an excellent starting point for exploring Lottie.Lottie is everywhere.Currently, there are numerous articles available on the topic of Lottie. You can explore them through various platforms:Each of these sources provides valuable insights into why and how to utilize Lottie in different environments.Lottie is highly regarded by many for the following reasons:Originally, Lottie was designed as a tool to convert Adobe After Effects animations into a format compatible with specific platforms. However, it has evolved into an independent specification and is no longer bound by Adobe After Effects terminology. You can find the Lottie specificationRecently, LottieFiles introduced a plugin for figma, further expanding the popularity and potential growth of Lottie. This development signifies that Lottie is gradually becoming an industry standard, which is fantastic news for the community.Nearly every article discussing Lottie highlights its ecosystem and praises its ease of use. It is indeed a straightforward tool that effectively accomplishes its purpose. However, let's shift our focus to the challenges that may arise.My personal experience with Lottie pertains specifically to web development, so these observations may not be relevant to other environments.If you intend to incorporate Lottie animations into a web project, the official documentation will direct you to lottie-web.Lets look at list of top contributors:Out of the remaining contributors, only 80 commits were made, which is less than 5% of the total commits. Most of these commits may not be directly related to animation playback, seeking, applying transformations, or optimizing drawing. While these commits are undoubtedly important, it appears that the main bulk of the code is primarily maintained by bodymovinOn one hand, the maintainers of Lottie are doing an excellent job by closing numerous issues. However, it's worth noting that the presence of 600 open issues does indicate that there are ongoing challenges and areas that require attention. This suggests that there is still work to be done to address and resolve these outstanding issues.As of my knowledge cutoff in May 2023, Lottie-web did not have any tests available on its GitHub repository. It is possible that the tests were implemented within Airbnb's internal codebase and not publicly visible. However, it's important to note that since you started writing this article, the maintainers have added some tests, which is a fortunate coincidence. This highlights the fact that contributing to Lottie's internals was challenging in the past due to the lack of validation mechanisms. It is encouraging to see that steps have been taken to address this issue with the inclusion of tests.Lottie-web does not support all features described in lottie format.Lottie-web offers support for rendering animations to 2D canvas context, SVG, and HTML.Each of these renderers presents its own set of challenges. For instance, when using the canvas renderer, it is possible to optimize animation playback by moving it to a web worker through the use of transferControlToOffscreen. This can significantly enhance the performance of the animation logic. However, SVG renderer does not support this capability since it is not possible to access the DOM from within a web worker.On the other hand, the SVG renderer provides features such as hardware-accelerated blur filters, making updating SVG elements relatively fast. Canvas renderer, on the other hand, lacks built-in support for simple blur filters. Additionally, if an SVG contains numerous objects, it can impact performance. Therefore, when playing an animation, it is essential to strike a balance between performance and the desired features, taking into consideration the capabilities and limitations of each renderer.You can find different articles about that for exampleOr even service which optimizes your lottie,.and this, lolIt is indeed noticeable that many articles focus on optimizing Lottie files and their structure, employing various techniques. In some cases, these optimizations may necessitate modifications to the original After Effects file.Readme saysMore optimizations are on their way, but try not to use huge shapes in AE only to mask a small part of it.Too many nodes will also affect performance.But why playing animation in web can be a problem?...Imagine you're creating a 2D game using WebGL. It would be great to incorporate animations created in After Effects into your game. Although you can draw animations using the canvas element, it lacks certain features. Another option is to render animations as SVG, but to use them in the WebGL context, you need to serialize the SVG, convert it into an image, and then upload that image to WebGL. Unfortunately, at present, there is no ideal solution for this.Actually, that's not entirely accurate. The lottie-weblibrary itself doesn't support rendering to WebGL. However, there is a package called canvaskit-wasm that wraps Skia (a graphics engine) with WebAssembly (wasm). This package includes a module called skottie which supports rendering animations into a WebGL surface. However, there is a drawback with this approach: using wasm requires loading a relatively large package, and it's uncertain whether all features are supported correctly, as the official compatibility table that tracks lottie support on different platforms does not include skottie.I often wonder why this technology was only introduced in 2015. The concept seems quite straightforward, doesn't it? Well, perhaps not. My guess is that there weren't many developers with experience in this particular type of software. Anything related to graphics can often feel like a mysterious realm, almost like black magic, especially for someone like me.It's evident that the lottie-web project is in need of assistance.How we can help? I did a workshop, where I tried to build lottie player from scratch.Another video can be interesting for you, it is about generating video, but the same time it overlaps with information I'm going to share.Our plan:Let's create a simple animation in after effectsCreate project in after effectsSet up compositionA composition is a framework for a movie. Each composition has its own timeline. A typical composition includes multiple layers representing components such as video and audio footage items, animated text and vector graphics, still images, and lightsHere you can find an overview of different layers you can create with after affects.Let's create just basic, solid color layer.Here we can specify it's color, width and height.Ok, this is our animation:But there is no animation!!!Animation is when something transforms on a screen, right?What we can change?If you click on a solid layer you can see it supports transformYou can change position, rotation, opacity, scale, anchor point of layer. Let's change someting:It's still not an animation, because we change position for first frame.And it's time to add keyframes:Let's move our rectangle to right bottom position. What does it mean?For time (0) (first keyframe) we declared that layer should have position (0, 0)For time (2s) (second keyframe) we declared position (1920, 1080). For time in between 0 and 2 seconds position will be interpolated using linear function.Question, how can we define none-linear animation?For that we can use bezier curves.On this screencast we've opened curve editor, splitted curve for position (we will discuss it later).So, we can control how x and y coordinates will be changed during time. For that we used cubic bezier.What is a cubic bezier? Wikipedia has a great explanationTo define such curve we need to define just 2 points, it is usually called as in and out control pointsFor example this curvehas 2 control points:Notice that we can also define linear animation with cubic bezier. Just put control points to diagonalIn order to simplify our first animation, let's roll back to linear animationOk, lets store our animation to json, for that we use bodymovinFollow plugin installation stepsLet's look at saved file:It contains a lot of one-two symbol named fields. It's already zipped 😃!In order to understand meaning of all fields we can use this lottie schemaAnother thing which can be convenient is json editorActually, lottie has very nice documentation, you can read it and skip this article 😄Root level of lottie file called animation in specification.Top level object, describing the animationLet's focus on itSo, I'm not going to copy paste the whole specification into this article, main idea, use it to understand content of lottie.Some IDE support schemasfor example, in vscode you can add vscode/settings.jsonAnd you will get description of of every property of your json right inside IDE.Everything clear with top level object.What is inside layers?Just one solid layer:Let's skip other properties for now, let's focus on important thing - ksks - is a Transform object which is responsible for animating this layer.All properties which we saw in after effects transform object.Every of them contains a property, which says is it animated property or not.If it's not an animated property it means there is no keyframes for that, value is static.In our example only position is an animated property.If property is not animated k contains static value.so, in our exampleposition is animated, so k contains keyframes.it describes 2 key frames.for t (time) = 0, s (state/value) is [0,0] means our layer in top-left corner of scenefor t (time) = 15.000000610962, (state/value) is [1920,1080] means our layer in bottom-right corner of scenePretty easy, right?It's more complex than you thinkFirst keyframe contains other properties: i, o, to, tiWhat does it mean?As I mentioned earlier, after effects support two different modes of position.splitted and combined (this is not an after effect term).with splitted mode x, y coordinates has separated keyframes definitions.in this case we would have p (position) object like this:s means splitted.let's consider p.x (position.x)Everything is simple herefor t = 0 value = 0for t = 15.0000006109625, value = 1920i - means in control point of cubic-beziero - means out control point of cubic-bezierwe already discussed earlier what does it meanWith this values it's a linear animation.Let's say we need to calculate value for frameNumber = 7, it can be calculated like.The same for y.Notice that the same logic of interpolation is applicable to opacity, rotation, scale and etc.let's go back to our initial case with combined positionWhat is i, o, to, ti?In this mode after effects exposes bezier curve which describes curve for position, and it's not the same as interpolation cubic bezier curve.In transform.position interpolation settings we can select type of interpolation we want.It does not change the way how it will be exported to lottie, because, as I mentioned before, line can be represented with bezier curve too.Let's consider this example:In exported jsonyou can see that ti, and to describe in and out control points of bezier 2d path.With this mode, ti, to describe only path, but how animation player should understand how fast we should move layer on that path?Lottie stores that information inside i and o propertiesIn after effects it can be changed in keyframe velocity settingsWe will consider how to interpolate position in this case later.Ok, now we know meaning of all important properties of our lottie. We know everything about top level object, know how layers store, how transform object works, and how key frames organized and how to interpolate values based on that data.I think we are ready to create our custom lottie renderer from scratch.Let's do it in the next partTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Amir Alam - May 28 shrey vijayvargiya - May 17 Rahul Solanki - May 27 shrey vijayvargiya - May 24 Once suspended, stepancar will not be able to comment or publish posts until their suspension is removed. Once unsuspended, stepancar will be able to comment and publish posts again. Once unpublished, all posts by stepancar will become hidden and only accessible to themselves. If stepancar is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Stepan Mikhailiuk. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag stepancar: stepancar consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging stepancar will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.