LottieFiles / lottie-react

lottie web player as a react component
https://lottiefiles.com
MIT License
720 stars 80 forks source link

Start / Stop frame #108

Closed Simoneth closed 2 years ago

Simoneth commented 2 years ago

I believe that this feature should be a must, start - stop animation based on frames.

Why? Because most of Lotties Files was made in loop, so most of the time you would like only half of the animation

samuelOsborne commented 2 years ago

Hi @Simoneth this is possible, you could grab the Lottie instance and then call the goToAndPlay method:

import React from 'react';
import { Player } from '@lottiefiles/react-lottie-player';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { lottie: null }; // initialize your state
    this.state.lottie.playSegments([15, 35] true); //Play your segments
  }

  render() {
    return (
      <Player
        lottieRef={instance => {
          this.setState({ lottie: instance }); // the lottie instance is returned in the argument of this prop. set it to your local state
        }}
        autoplay={false}
        loop={true / false depending whether you want to loop the segment or not }
        controls={true}
        src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
        style={{ height: '300px', width: '300px' }}
      ></Player>
    );
  }
}

export default App;