lottie-web icon indicating copy to clipboard operation
lottie-web copied to clipboard

Animation path does not work

Open KindSpidey opened this issue 9 months ago • 1 comments

Hey, guys! I am using lottie-web library in my Vue 3 project.

When I use my .json animation as already imported in file, this way, everything works:

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import lottie from 'lottie-web';
import diamond from '../assets/diamond.json'

onMounted(async () => {
  lottie.loadAnimation({
    container: document.getElementById('lottie-animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
   animationData: diamond
  });
});
</script>

But when I'm trying to do absolutely same thing, but using path instead of animationData, I'm getting error

lottie-web.js?v=81bb1d13:981 Uncaught DOMException: 
Failed to read the 'responseText' property from 'XMLHttpRequest': 
The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json').
    at formatResponse (http://localhost:5173/node_modules/.vite/deps/lottie-web.js?v=81bb1d13:981:29)
    at xhr.onreadystatechange (http://localhost:5173/node_modules/.vite/deps/lottie-web.js?v=81bb1d13:996:38)

Why?

The code:

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import lottie from 'lottie-web';

onMounted(async () => {
  lottie.loadAnimation({
    container: document.getElementById('lottie-animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '../assets/Animation - 1714120260751.json'
  });
});
</script>

KindSpidey avatar Apr 26 '24 09:04 KindSpidey

they are not gonna answer xDDD

dnylnd avatar Apr 29 '24 13:04 dnylnd