Loop is not working properly in Vue

[softmonkeyjapan]

Hello,

I'm trying to add an animation in my Laravel/Vue app. I followed the steps from the readme file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    laravel({
      input: 'resources/js/app.js',
      refresh: true,
    }),
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['dotlottie-player'].includes(tag),
        },
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
});

import { DotLottiePlayer } from '@aarsteinmedia/dotlottie-player-light';

const app = createApp({ render: () => h(App, props) })
    .component('DotLottiePlayer', DotLottiePlayer);

<dotlottie-player
    src="https://lottie.host/9fcb4a8f-3e25-4ea6-b8b4-8de6eb868c86/pFRxrnwQnn.json"
    mode="bounce"
    style="width: 100px; height: 100px;"
    direction="1"
    loop="true"
    autoplay="true"
    controls="true"
    subframe="true"
></dotlottie-player>

The animation starts correctly and bounce as expected the first time. However, when looping, it seems to always starts from one point instead of bouncing from one to the other. When I try to animate my file in a regular HTML file:

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<dotlottie-player src="https://lottie.host/9fcb4a8f-3e25-4ea6-b8b4-8de6eb868c86/pFRxrnwQnn.json" background="transparent" speed="1.6" style="width: 100px; height: 100px" direction="1" playMode="bounce" loop autoplay></dotlottie-player>

It is working fine. Any thoughts on why it is not behaving the same way in Vue ? Thanks for the help

[johanaarstein]

Hi, that's strange. I'll look into it!

[johanaarstein]

The where two issues:

• The script was checking the animation for in-point, to decide where to start after a bounce-loop. I honestly don't remember why I did it like this, since it's probably not the behavior one would want anyway.
• Your animation had set in-point to frame 99, either by mistake or for some reason not related to this.

In the latest update I've changed it so animations with loop-mode set to bounce bounces between the last frame and frame 0, unless an animation segment is specified.