Blink. Reverse animation go to final frame and return.

Hi:

I have this code:

<div style="background-color: black; position: absolute; width: 100px; height: 100px;"></div>
<script>
var div = document.querySelector('div');
var animacion = anime({
	targets: div,
	opacity: [0,1],
	duration: 2000,
	easing: 'linear',
	begin: function(anim) {
		console.log('begin');
		if (anim.direction === 'normal') {
			div.style.display = 'block';
		}
	},
	complete: function(anim) {
		console.log('complete');
		if (anim.direction === 'reverse') {
			div.style.display = 'none';
		}
	}
});
</script>

If enter to the page and let animation end, then execute the backward function, the element blink. That happends rarely. For example, when the window explorer is maximized, happen, but when is small, not.

Thanks.

Here a GIF: https://drive.google.com/file/d/1Xd7rSGrlaLlFE3xNOJqJWzR_MRp0-IBw/view?usp=sharing

[braamgenis]

I had the same issue. A simple workaround that worked in my case, is to set animation.completed = false; before calling animation.play(); again. That prevents animation.reset() from being called inside animation.play(). For example:

var animation = anime({
    targets: '.animated-item',
    easing = 'linear',
    opacity: [ 0, 1 ],
});
animation.play();

then when you want to play it backwards:

animation.reverse();
animation.completed = false;
animation.play();

This has the side effect of prevent the begin callback from firing on the reverse play, but in my case I could use the changeBegin callback instead. It may cause other side effects so your mileage may vary. I think the ideal fix is probably @jnordberg’s PR above.

[juliangarnier]

Fixed in v3.1.0!