✨ feat: add a scale prop to the lotties

packages/playground/vite-project/src/App.vue

@@ -1,26 +1,26 @@
 <template>
-  <div>
-    <Vue3Lottie :animationData="DogJSON" :width="300" :height="300" />
-  </div>
+  <Vue3Lottie :animationData="DogJSON" :width="300" :height="300" />
+
   <Vue3Lottie
     animationLink="https://assets1.lottiefiles.com/packages/lf20_soCRuE.json"
     :height="300"
     :width="300"
     :pauseOnHover="true"
+    :scale="1.1"
   />
 
   <Vue3Lottie
     animationLink="https://assets1.lottiefiles.com/packages/lf20_xvz0dpbn.json"
     assetsPath="https://source.unsplash.com/user/wsanter"
-    :height="300"
-    :width="300"
+    :height="200"
+    :width="200"
   />
+
   <HelloWorld msg="Hello Lottie! Using Vue 3 + TypeScript + Vite" />
 </template>
 
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
-
 import DogJSON from './assets/dog.json'
 </script>
 

packages/vue3-lottie/src/types.ts

@@ -19,6 +19,7 @@ export interface LottieProps {
   pauseOnHover: boolean
   playOnHover: boolean
   noMargin: boolean
+  scale: number
   backgroundColor: string
   pauseAnimation: boolean
   assetsPath: string

packages/vue3-lottie/src/vue3-lottie.vue

@@ -78,8 +78,12 @@ export default defineComponent({
       type: Boolean as PropType<LottieProps['noMargin']>,
       default: false,
     },
+    scale: {
+      type: Number as PropType<LottieProps['scale']>,
+      default: 1,
+    },
     renderer: {
-      type: String as PropType<LottieProps['rendererSettings']>,
+      type: String as PropType<LottieProps['renderer']>,
       default: 'svg',
     },
     rendererSettings: {
@@ -165,6 +169,18 @@ export default defineComponent({
         lottieAnimationConfig.rendererSettings = props.rendererSettings
       }
 
+      /**
+       * If the scale is not 1, we need to set `viewBoxOnly` to true
+       * This will remove the translate3d transform from the svg and
+       * will allow us to scale the svg using css transform scale
+       */
+      if (props.scale !== 1) {
+        lottieAnimationConfig.rendererSettings = {
+          ...lottieAnimationConfig.rendererSettings,
+          viewBoxOnly: true,
+        }
+      }
+
       // actually load the animation
       lottieAnimation = Lottie.loadAnimation(lottieAnimationConfig)
 
@@ -248,6 +264,7 @@ export default defineComponent({
         '--lottie-animation-container-height': height,
         '--lottie-animation-container-background-color': props.backgroundColor,
         '--lottie-animation-margin': props.noMargin ? '0' : '0 auto',
+        '--lottie-animation-scale': props.scale != 1 ? props.scale : '',
       }
 
       return cssVariables
@@ -473,4 +490,8 @@ export default defineComponent({
   overflow: hidden;
   margin: var(--lottie-animation-margin);
 }
+
+.lottie-animation-container svg {
+  transform: scale(var(--lottie-animation-scale));
+}
 </style>