Unable to play backwards with Next.js

[rosscturner]

Thanks for a great package. Have been using it a few months and it's been working great. https://lightmillmedia.com. The menu icon on the site is a Lottie animation. Plays forwards onClick and reversed on the second click. The live site is on an older version of the package.

Initially I used CRA to bootstrap the project and all is working fine. Now I'm migrating to Next.js and while my animations work I can no longer play them backwards onClick, they just jump to frame zero. I can only get them to play backwards if loop is enabled but this also leads to the animation jumping about.

Is there a reason this would be the case when using Next. I have updated to the most recent version but the issue persists. Any help would be appreciated , thanks!

[mifi]

Hi. Could you make a reproduceable minimal example in something like codesandbox?

[rosscturner]

@mifi here's a previously working example that no longer works. Should play in reverse on the second click.

https://codesandbox.io/s/relaxed-johnson-tz4qx?file=/src/App.js

[rosscturner]

@mifi hi again. I've realised now that with package v1.0.1-v1.2 the example above works. v1.3.0 and above breaks backwards playback. Is this something I'm doing wrong in my code or is it a bug in the package?

[mifi]

I changed the code to this, and now it works:

  const openMenu = () => {
    setIconActive(true);
    setDirection(1);
    setPlay(true);
  };

  const closeMenu = () => {
    setIconActive(false);
    setDirection(-1);
    setPlay(true);
  };
  useEffect(() => {
    import("../menu.json").then(setAnimationData);
    setSegmentFrom(0);
    setSegmentTo(69);
  }, []);

and added this:

        <Lottie
...
          onComplete={() => setPlay(false)}

the issues were:

• you were flipping setSegmentFrom/setSegmentTo every time you toggle
• play never got set to false so setting to true did not trigger any react effect as it was always true

[rosscturner]

@mifi great, this works on the latest version. My code was a workaround for 1.2 and below. Thanks again for your help.