Anime.js how to reverse this animation?

Question

I've recently started working with Anime.js to animate my designs and I´ve been stuck in this for a while now, bet for many this is very simple! I have a button that enlarges my div and would like to have the div in its initial state if the icon is clicked again. My HTML:

var boxGetsLarger = anime({
  targets: '.agent-button',
  width: {
    value: '+=300',
    duration: 200,
    easing: 'linear'
  },
  borderRadius: {
    value: 83
  },
  duration: 200,
  height: {
    value: '+=20'
  },
  easing: 'linear',
  autoplay: false

});


document.querySelector('.agent-button').onclick = boxGetsLarger.play;

.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

score 6 · Answer 1 · answered May 22 '18 at 11:13

It is shame there is no built-in toggle function but there is a reverse function what this does is toggle the internal attribute reversed which, in turn, controls what the play function does.

In theory, you can just call reverse after play like so

var boxGetsLarger = anime({
  targets: '.agent-button',
  width: {
    value: '+=300',
    duration: 200,
    easing: 'linear'
  },
  borderRadius: {
    value: 83
  },
  duration: 200,
  height: {
    value: '+=20'
  },
  easing: 'linear',
  autoplay: false
});

document.querySelector('.agent-button').onclick = function() {
  boxGetsLarger.play();
  boxGetsLarger.reverse();
}

.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

Only I found reverse was running before play was finished leading to some strange behaviour, I'd recommend taking advantage of the 'finished' promise built-in like so

var boxGetsLarger = anime({
  targets: '.agent-button',
  width: {
    value: '+=300',
    duration: 200,
    easing: 'linear'
  },
  borderRadius: {
    value: 83
  },
  duration: 200,
  height: {
    value: '+=20'
  },
  easing: 'linear',
  autoplay: false
});

document.querySelector('.agent-button').onclick = function() {
  boxGetsLarger.play();
  boxGetsLarger.finished.then(() => {
    boxGetsLarger.reverse();
  })
}

.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

This will now only reverse the direction when play is finished.

I hope you find this helpful.

score 3 · Answer 2 · answered Jan 05 '19 at 12:05

I use this to toggle anime.js animations on a single button.

To initiate reverse() the animation must have run once. You can check this by evaluating the property: 'began'. The first time your animation runs this property will be set 'true'.

console.log(boxGetsLarger); // began: false

document.querySelector('.agent-button').onclick = function() {

    boxGetsLarger.play();

    if (boxGetsLarger.began) {
        boxGetsLarger.reverse();
    }

   console.log(boxGetsLarger); // began: true

}

score 1 · Answer 3 · answered Aug 28 '21 at 22:30

What fixed it for me was juliangarnier/anime#577 (comment):

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:

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

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.

From his linked CodePen:

function toggle() {
  if (anim.began) {
    anim.reverse()
    
    if (anim.progress === 100 && anim.direction === 'reverse') {
      anim.completed = false
    }
  }

  if (anim.paused) {
    anim.play()
  }
}

score 0 · Answer 4 · answered May 22 '18 at 10:31

0

Give this a try: (from docs)

boxGetsLarger.reverse();

answered May 22 '18 at 10:31

Yotam Omer

15,310
11
62
65

You'd think there'd be a toggle function – Andrew Bone May 22 '18 at 10:42
thanks! tried already but it does conflict with the other function, the one that opens the div – maria di cesare May 22 '18 at 11:20

score 0 · Answer 5 · answered Nov 03 '18 at 22:05

I used this to toggle back and forth between an "open" state and a "closed" state.

  const toggle = (animation, open) => {
    if (open) {
      animation.play();
      if (animation.reversed) {
        animation.reverse();
      }
    } else {
      animation.play();
      if (!animation.reversed) {
        animation.reverse();
      }
    }
  }

Anime.js how to reverse this animation?

5 Answers5