React - support for css styling

[VogelDevelopment]

Overview

In the @lottiefiles/dotlottie-react library we are forced to use canvas. I've set up my animations and css to dynamically change the styling of my animations (through after effects css class-support). The new library "@lottiefiles/dotlottie-react" doesn't support that functionality, thus I'm currently forced to continue working with "@dotlottie/react-player", where it works just fine, but is deprecated. Would be nice to have css-styling support with the new renderer as well (or the ability to use the old method).

Type

• [ ] New feature
• [x] Changes to existing features
  • Support css styling for the forced canvas renderer or enable support for legacy renderers which support css styling

Motivation

I've set up my animations and css to dynamically change the styling of my animations (through after effects css class-support). The new library "@lottiefiles/dotlottie-react" doesn't support that functionality, thus I'm currently forced to continue working with "@dotlottie/react-player", where it works just fine, but is deprecated. Having meaningful animations is cool, being able to adjust them based on your style, or user preferences (or even just light/dark-mode) is essential for some applications.

...

Labels

• [ ] Add the Type: Feature Request label to this issue.
• [ ] Add the React label to this issue.

[theashraf]

@fragkingler I don't think it's possible to dynamically theme the animation using CSS since dotLottie-web renders on a canvas. However, you may want to check out the dotLottie theming feature, which allows you to change the animation colors dynamically at runtime.

You can find an overview of dotLottie theming here: https://developers.lottiefiles.com/docs/tools/dotlottie-js/theming/