justin-chu / react-fast-marquee

A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
https://react-fast-marquee.com
MIT License
1.16k stars 95 forks source link

onFinish fires randomly on marquee start #101

Open kubagp1 opened 5 months ago

kubagp1 commented 5 months ago

onFinish function gets called randomly when marquee starts. In this demo i use page refresh to demonstrate and it happens rarely, but in an application I'm writing this happens around 33% of times when Marquee gets rendered (maybe something to do with more complex logic than this basic example). In my project I use the onFinish callback to hide the marquee after it had finished scrolling, resulting in it being hidden one frame(? not sure it's exactly one frame but it flashes briefly) after the initial render. I'm using Chrome 123 in incognito mode. Doesn't happen on Firefox.

https://github.com/justin-chu/react-fast-marquee/assets/37304664/fe0b1652-2f15-464a-b50e-113f31c04988

https://codesandbox.io/p/devbox/gw3gt6?file=%2Fsrc%2FApp.jsx%3A17%2C23

kubagp1 commented 5 months ago

Workaround:

<Marquee onFinish={handleChange as () => void}>
const handleChange = (e: { elapsedTime: number }) => {
  if (e?.elapsedTime === 0) return;

  // Do your stuff...
}

Would be nice if type on onFinish was correct out of the box.