'direction' prop is not working

[supergianlu]

Adding direction={-1} nothing happen.

[samuelOsborne]

Hi @supergianlu, thanks for making this ticket, will work on getting a fix out shortly. In the meanwhile, you can get the animation playing in reverse this way:

import React from "react";
import "./styles.css";
import { Player } from "@lottiefiles/react-lottie-player";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { lottie: null }; // initialize your state
  }

  render() {
    return (
      <div className="App">
        <Player
          lottieRef={(instance) => {
            this.setState({ lottie: instance }); // the lottie instance is returned in the argument of this prop. set it to your local state
          }}
          onEvent={(event) => {
            if (event === "load") {
              this.state.lottie.setDirection(-1);
            }
          }}
          autoplay={true}
          loop={true}
          controls={true}
          src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
          style={{ height: "300px", width: "300px" }}
        ></Player>
      </div>
    );
  }
}

export default App;

sandbox here:

https://codesandbox.io/s/lottie-react-direction-test-ysj6p?file=/src/App.js

[UrionBlade]

Try adding keepLastFrame to the Player as props

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[minizwergi]

Something new here?

[StrikerXx798]

Up issue, direction doens't worked

[CTOverton]

Nearing 9 months now, is the baby coming?

[CTOverton]

@supergianlu for your workaround, do you have a suggestion for how to do it with functional components? I couldn't seem to get it to work 🥺

[mortengustafsson]

I'm having the same problem. direction={-1} is not working, setting keepLastFrame doesn't help.

[xdelmo]

I'm having the same issue 😢

[xdelmo]

@supergianlu for your workaround, do you have a suggestion for how to do it with functional components? I couldn't seem to get it to work 🥺

Did you find a workaround for functional components?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[Oliver-Turp]

Is this still not working? This has been open for an entire year....

Edit: make that two years

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.