javascript - Anime.js how to reverse this animation? - Stack Overflow

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=".2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

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./ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

• javascript
• animation
• reverse
• anime.js

Share Improve this question Follow edited May 22, 2018 at 10:19 Andrew Bone 7,29122 gold badges2020 silver badges3434 bronze badges asked May 22, 2018 at 10:02 maria di cesaremaria di cesare 5111 gold badge11 silver badge33 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

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./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 remend 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./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.

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

}

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

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 they 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.

From his linked CodePen:

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

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

Give this a try: (from docs)

boxGetsLarger.reverse();

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();
      }
    }
  }