Anime: Blink. Reverse animation go to final frame and return.

[metalfox6383]

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

[metalfox6383]

I've noted that happen only when I use the callbacks.

[luminairre]

+1, similar problem with a simple reverse and play, the target element blinks. Something like this, the ball will blink to initial scale and then starts from 10 to 1 when reverse and play is run.

var tl = anime.timeline({autoplay: false});
tl.add({
  targets: ".ball",
  scale: [1,10],
  duration: 500,
  easing: "linear"
});  
tl.play();
// run this later
tl.reverse();
tl.play();

[Cedric-ruiu]

+1.

I try to make accordion, collapse, 'reverse' provide unstable animation.
example of founded accordion collapse => change to animejs v3.0.1 with https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js to see the breaking animation.

[jnordberg]

I'm facing the same issue, looks like it is caused by a hardcoded call to setAnimationsProgress(0) in animation.reset() that does not consider the animation direction.

[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!

[manugb]

@juliangarnier hi! I am still experiencing this blink issue, I am using 3.1.0

Also lets say I am using 2 timelines, and I would want to, at the middle of timeline1 animation (the IN), call timeline2 to take out the elements (the OUT) from the state timeline1 left the animated elements. As of now, when I play the timelines, both start from the initial position when the animations where added.
Is it possible to do this? which functions should I take a look?

[PabloDinella]

I still need to set animation.completed = false; before calling animation.play(); again, version 3.2.1