mifi / react-lottie-player

Fully declarative React Lottie player
MIT License
494 stars 52 forks source link

goTo flashing first frame by default when other frames are specified #82

Open Rajdeepc opened 1 year ago

Rajdeepc commented 1 year ago

@mifi I have a lottie.json which have below markers

"markers": [
    { "tm": 0, "cm": "{\r\"name\":\"remove_background\"\r}", "dr": 25 },
    { "tm": 25, "cm": "{\r\"name\":\"removing_background\"\r}", "dr": 25 },
    { "tm": 50, "cm": "{\r\"name\":\"restore_background\"\r}", "dr": 25 },
    { "tm": 75, "cm": "{\r\"name\":\"loop_preloader_gradient\"\r}", "dr": 50 },
    { "tm": 125, "cm": "{\r\"name\":\"loop_preloader_bright\"\r}", "dr": 50 }
  ]

And I am trying to load the "loop_preloader_gradient " marker like named markers.

import Lottie from 'react-lottie-player';

function LoopyPreloader({ animationData, goTo }) {
  return (
    <Lottie
      loop={true}
      play={true}
      animationData={animationData}
      goTo={goTo} // loop_preloader_gradient
      style={{ width: 68, height: 68 }}
    />
  );
}

This causes a 2 seconds blink of "remove_background" animation and then renders "loop_preloader_gradient"

mifi commented 1 year ago

Hi. Could you make a codesandbox or similar that shows the issue? Does the same issue happen with lottie-web or does it work with that?

Rajdeepc commented 1 year ago

@mifi Checked with lottie-web. Same issue.

Codesandbox: https://codesandbox.io/s/interesting-elion-rl60c0?file=/src/Loopy.js

mifi commented 1 year ago

Then I would file an issue at lottie-web instead, because react-lottie-player is merely a wrapper around lottie-web, so not much we can do about lottie-web bugs