Theming Optimizations

[khuynh92]

Overview

My team is switching over from using the svg renderer from @dotlottie/react-player to this package, and we're running into some issues with theming using this package. Our use case requires the need for dynamic theming through loadThemeData.

Asset used for the examples: https://lottie.host/5edd3191-18f1-4dcb-b6b5-1c00ef8b2f5c/UQ5qeVivMe.lottie
Codepen: https://codepen.io/khuynh92/pen/RwOzKGZ?editors=0010

Slot ID implementation

Issue: There is no easy way to add a sid to a JSON file. Users have to go into a JSON file, locate the correct property, and manually add the sid. This can become tedious if this has to be done to multiple files.

Expected Behavior: In After Effects, assets can have class names and id's injected into the JSON file simply by renaming the layer in AE. For example renaming a layer to #star-outline.lottie-icon-outline in AE will inject a class name of .lottie-icon-outline and an id of #star-outline in the exported JSON file.

It would be nice to be able to apply theme updates using the existing class name or id, that way we don't have to manually add sid to the JSON file, or if there was a script provided that added the sid automatically based off of existing class names or ids in that are in the JSON file.

Updating static/paused assets

Issue: When an asset is paused (or has finished animating), theme updates via loadThemeData or loadTheme do not trigger a theme update. Only when the animation begins to play again will the theme update.

Expected Behavior: using the methods loadThemeData or loadTheme should update the theme, even when paused.

Memory access out of bounds error when reverting back to default theme

Issue: Using loadThemeData, I'm running into issues when trying to revert an asset's theme back to the original data that's within the JSON file. Changing the theme works properly, but when reverting the theme back using loadThemeData("") or loadTheme(""), the manipulated property changes to black and error messages are thrown.

Expected Behavior: Theme should revert back to original colors from the JSON file.

...

Motivation

What inspired this enhancement? What makes you think this should be included?
The need for dynamic theming and ease of theming implementation

...

Labels

• Add the Type: Enhancement label to this issue.

[theashraf]

Thanks @khuynh92 for reporting these issues. We will look into it and get back to you with an easier way to set the slot IDs

[theashraf]

@khuynh92

You're right, setting the "sid" on lottie json properties manually is not easy. We're currently working on abstracting the theme creation process in Lottie Creator, but until that happens, there is a workaround that allows you to assign slot IDs to animated color properties to match the parent shape's existing class name or ID. You can use relottie to parse the Lottie JSON into a relottie AST and traverse the AST to locate the target shapes by their class name or ID, and then modify their animated color properties' slot ID to match their parent Shapes class name or ID.

It would be nice to be able to apply theme updates using the existing class name or id, that way we don't have to manually add sid to the JSON file, or if there was a script provided that added the sid automatically based off of existing class names or ids in that are in the JSON file.

I've noted down the other two issues and have been able to replicate them. I will update you as soon as I have a fix

[theashraf]

@khuynh92

This part of the issue is fixed in dotlottie-web@0.22.0 release.

Memory access out of bounds error when reverting back to default theme
Issue: Using loadThemeData, I'm running into issues when trying to revert an asset's theme back to the original data that's within the JSON file. Changing the theme works properly, but when reverting the theme back using loadThemeData("") or loadTheme(""), the manipulated property changes to black and error messages are thrown.

Will update you once the other part of the issue is resolved, thanks

[khuynh92]

Will update you once the other part of the issue is resolved, thanks

Appreciate it! Thanks for the consistent status updates 🙂