Animation is run at every re-render

[Kyliathy]

Hey :). I'm using functional components and useState. Simply changing the value of a textbox (via the function provided by setState) will cause the animation to be re-run. Maybe I'm missing something :).

[vishalkumarsinghvi]

Can you share your piece of code because if you are using hooks so we have to maintain some rules in hooks..

[roackb2]

@Kyliathy @vishalkumarsinghvi

I faced similar situation and I found the cause of the problem.

The old code cause the animation to start again every time render is called:

    render() {
       let animate = { left: ['0px', '250px']}
        return (
            <Tweenful.div
                className="tween-box row ml-2 mb-2 mr-2 mt-2"
                duration={1500}
                easing={elastic(1, 0.25)}
                style={{ position: 'relative' }}
                animate={animate}>
                <video id="video-elem" controls width="320" height="240"></video>
            </Tweenful.div>
        )
    }

What is going on is that the animate object is created every time render is called, so the animation passed to Tweenful.div is different object, this cause Teenful to start animation again.

One working solution is to put the animate object in component state, like following:

    constructor() {
        super();
        this.state = {
            animate: { left: ['0px', '300px'] }
        }
    }

And in your render function, use the animate object in state, it will be the same reference (object) across different render calls

            <Tweenful.div
                className="tween-box row ml-2 mb-2 mr-2 mt-2"
                duration={1500}
                easing={elastic(1, 0.25)}
                style={{ position: 'relative' }}
                animate={this.state.animate}>
                <video id="video-elem" controls width="320" height="240"></video>
            </Tweenful.div>

Then it just works fine.