search

johanaarstein / dotlottie-player-light

Light version of Web Component for playing Lottie animations in your web app
GNU General Public License v2.0
1 stars 0 forks source link

Attribute Problem: background, controls ... #2

Closed bluelemonade closed 1 year ago

bluelemonade commented 1 year ago

I created a new vue3/cli project to work around the loading problem. It's working now.

I can view .lottie files. the cusom tags are filtered with the entry in vue.config.js.

chainWebpack:config => {
     config.module
       .rule('vue')
       .use('vue-loader')
       .tap(options => {
         options.compilerOptions = {
           ...options.compilerOptions,
           isCustomElement: tag => tag.startsWith('dotlottie-')
         }
         return options
       })
   },

However, the attributes are ignored. e.g. have no effect on autoplay control, whether false or true, background works for the am.lottie file. unfortunately not with mine.

<dotlottie-player controls="false" autoplay="" background="#ff0000" loop="" src="https://storage.googleapis.com/aarsteinmedia/am.lottie" style="width: 320px; margin: auto;"></dotlottie-player>
    <dotlottie-player  autoplay="false" background="#ff0000" src="./gespenst.lottie" style="width: 400px; margin: auto;"></dotlottie-player>

What could be the reason for this?

In any case, the light version is very suitable for my purposes.

image

johanaarstein commented 1 year ago

Hi, Glad to hear you got around the loading issue.

I'm not sure, but judging from the red border around the image I think what is happening here is that the animation itself has a background color. If you set the light purple background to transparent, in After Effects or any other editor for Lottie animations, you would be able to manipulate the background the way you want to.