Question: Controlling animation state within a button

First of all, THANK YOU for creating this 😃 Super easy to plug into my react app and get lottie-ing 😃

Just wondering how best to implement a clickable ‘like’ button like the twitter example. Most things I see are all loops and i’m unsure how to get the animation to pause/stop.

I thought what i could do was start with loop: false, autoplay: false and my initial state isStopped: true. Then onClick: basically just set isStopped to false as well, so that way the heart would go from grey to pink, then stop.

The tricky bit next was how to either a) ‘reset’ it back to frame 1 or b) reverse the direction of the animation and play in reverse til it hits frame 1.

Any ideas?

Secondly, the documentation on the bodymovin repo for direction is a little vague, but from looking at your source code am i correct in assuming that -1 is reverse?

I have a rough sketch here,

export default class LottieControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isPaused: true, isLiked: false };
    }

    handleClick = () => {
        const { isLiked } = this.state;
        if (!isLiked) {
            this.setState({ direction: 1, isPaused: false, isLiked: true });
        } else {
            this.setState({ direction: -1, isPaused: false, isLiked: false });
        }
    };

    render() {
        const buttonStyle = {
            display: 'block',
        };

        const defaultOptions = {
            loop: false,
            autoplay: false,
            animationData: animationData,
            direction: this.state.direction || 1,
        };

        return (
            <div>
                <button style={buttonStyle} onClick={this.handleClick}>
                    <Lottie
                        options={defaultOptions}
                        height={100}
                        width={100}
                        isPaused={this.state.isPaused}
                    />
                </button>
            </div>
        );
    }
}

[fabio-C]

@chenqingspring How can I see the code behind the toggle example? The link show me only the animation.

[chenqingspring]

I need to clarify your requirement, do you want to toggle your like button like this?

gray unlike -> click -> pink like -> click -> gray unlike

If so, I suggest you to use direction toggle with setting loop & autoplay to false and init isStopped to true

then, bind this clickHandler to your button

    const clickHandler = () => {
      const {isStopped, direction} = this.state;
      if (!isStopped) {
        this.setState({direction: direction * -1})
      }
      this.setState({isStopped: false})
    }