Reverse on animation is broken in anime js 3

[sven-ra]

When I try to make a togglable animation like togglable menu for example the animation controls don't work as intended after the first time. When I click for reversed animation, it instead snaps to the beginning and plays it from the start again. Or there might be some other strange behaviour. This used to work in 2.2.

https://codepen.io/www_sven/pen/OYBaGw Anime JS 3.0.1
https://codepen.io/www_sven/pen/VOEVJz Anime JS 2.2.0 -> Works as expected

Steps to reproduce:

1. Click on the toggle button to make the box appear
2. Click on the toggle button to hide the box
3. Click on the toggle button to make the box appear again
4. Click on the toggle button to hide the box (Instead of hiding the box, the appear animation plays out again)

[Haojen]

I also have such problems.

[frncsgelay]

Also experienced this problem. What I did is used the CDN on version 2.2.0

[ghost]

Julian on a long vacation?) No activities for the last 5+ months...

[Npradheepan]

hi. how can help you?

…

On Wed, Jun 19, 2019 at 9:34 AM Eugene Kopich ***@***.***> wrote: Julian on a long vacation?) No activities for the last 5+ months... — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#577?email_source=notifications&email_token=AKWCZ5LDE7JH4YAKKLHLKHTP3HOQJA5CNFSM4HRESMM2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYA7DQI#issuecomment-503443905>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKWCZ5LNY6CBI7BKCJAMWF3P3HOQJANCNFSM4HRESMMQ> .

[StephenStrickland]

Also experiencing this issue.

[ghost]

@StephenStrickland new version 3.1.0 was released yesterday, have you tried it? It should be fixed...

[davidbernegger]

@web2033 can still reproduce the issue with @sven-ra's code on 3.1.0, third click flickers. https://codesandbox.io/s/testwith3-1-rfi9r

[ghost]

Yeah flickers, I thought it was related to this fix #546

[StephenStrickland]

@web2033 yeah, problem still exists in 3.1.0. I also thought that #546 would fix it, but apparently it didn't.

[hamzamihaidanielx]

Can confirm, still not working, @juliangarnier, @web2033 any possibility in the next version to be fixed? :(

[StephenStrickland]

This is currently blocking my project, I attempted a downgrade to 2.1 but there's some behavior changes that doesn't make it easy to downgrade (relative sizing for width/height animations). So I'm kinda stuck with v3.x. Is there any way that I can assist in triaging this issue?

[hamzamihaidanielx]

This is currently blocking my project, I attempted a downgrade to 2.1 but there's some behavior changes that doesn't make it easy to downgrade (relative sizing for width/height animations). So I'm kinda stuck with v3.x. Is there any way that I can assist in triaging this issue?

Maybe, any of us can find the issue and do a PR? I do not know...

[buwilliams]

The workaround I've found is to use an "in/out" animations. I use the "in" animation and then when I'm ready to reverse the animation I use the "out" animation. I destroy the animations between. Basically, I skip using reverse() altogether. Once I abandoned reverse() life got much easier.

Simple example:
let anim = anime({targets: el, left: 200, autoplay:false}); anim.play()

let anim = anime({targets: el, left: 0, autoplay:false}); anim.play()

[martin31821]

I'm also experiencing this problem. My solution was something like @buwilliams suggested, but that leads to a lot of boilerplate code.

[slavanossar]

I encountered this issue today, here is my solution as a pen.

I think the confusion arises from when animations are paused, and how the reverse() method works:

1. Non-looped animations are automatically paused when the reach the end (or beginning when reversed).

2. The reverse() method only changes the playback direction, and doesn't unpause a paused animation.

Doing reverse() on an animation while it is in progress means it will continue to play in the opposite direction, but if the animation is at the beginning/end (i.e. paused), you will also need to do play() to get it started again.

[ghost]

@slavanossar Has the correct answer. seek() only reverses the playback direction of an animation. It doesn't automatically move the current location of the animation to the end.

In order to reverse an animation, and then play it back from the end, the following must be done:

animation.seek(animationDuration);
animation.reverse();
animation.play(); // Assuming autoplay is set to false

[m-eton]

I managed to use reverse() on a timeline after I followed @slavanossar 's advice, but I still have my background flicker for a millisecond, which is unacceptable and very obvious since I'm toggling from black to white. Weirdly enough, on codepen same code doesn't flicker, but here my custom timeline delays don't work (that second parameter in .add({}, "-=500")). Any suggestions?

[manugb]

I have the same problem as @m-eton .

I manage to use reverse() on a timeline, but I still have my translate flicker for a milisecond, which is unacceptable and very obvious since I am moving a div from point B to point A (the reversed) and for a milisecond the div travels to A and back to B, and then animate smoothly to A. Plus it only happens when running the reversed timeline (B to A) and not the original (A to B).

Any suggestions? seems like its aplying the original styles and then recalculting

[manugb]

Taking a closer look, I need to make this change, In order to make the reverse work as expected.

Commenting the reset if completed section

    if (!instance.paused) {
      return;
    }
    // if (instance.completed) {
    //   instance.reset();
    // }
    instance.paused = false;
    activeInstances.push(instance);
    resetTime();
    if (!raf) {
      engine();
    }
  };```

Anyway, this breaks other features, I guess, that hitting play again resets the animation

[slavanossar]

I managed to use reverse() on a timeline after I followed @slavanossar 's advice, but I still have my background flicker for a millisecond, which is unacceptable and very obvious since I'm toggling from black to white. Weirdly enough, on codepen same code doesn't flicker, but here my custom timeline delays don't work (that second parameter in .add({}, "-=500")). Any suggestions?

I also just experienced this issue when using a timeline, instead of the single animation instance used in my solution.

The problem is caused by this line. An explanation of what happens at the end of a timeline animation when my solution is used:

• The animation is at the end, so completed = true.
• reverse() is called, setting reversed = true.
• play() is called, and checks if the animation is completed. If it is, the animation is reset.
• ⚡️ FLICKER ⚡️
• Animation starts playing, in the correctly reversed direction.

The problem starts in the toggleInstanceDirection method, which is called in reverse() – it should be doing something like this:

function toggleInstanceDirection() {
  var direction = instance.direction;
  if (direction !== 'alternate') {
    instance.direction = direction !== 'normal' ? 'normal' : 'reverse';

    if (instance.progress === 100 && instance.direction === 'reverse') {
      instance.completed = false;
    }
  }
  ...
}

I've updated my pen with code that should work for both single animations and timelines.

[kn0wn]

This should be fixed in v3.2.0

[LuisAlejandro]

I encountered this issue today, here is my solution as a pen.

I think the confusion arises from when animations are paused, and how the reverse() method works:

1. Non-looped animations are automatically paused when the reach the end (or beginning when reversed).

2. The `reverse()` method only changes the playback direction, and doesn't unpause a paused animation.

Doing reverse() on an animation while it is in progress means it will continue to play in the opposite direction, but if the animation is at the beginning/end (i.e. paused), you will also need to do play() to get it started again.

This was the solution that made it for me. Much appreciated!