How to trigger an animation in javascript that moves backward in the direction of the original animation?

I have a side bar that moves to the screen when I press it, but I don’t know how to trigger a reverse animation when i click another button. Any help?

Hi!
Could you post a link to the project or the code you have so far?

It has to be viewed in a mobile view by the way, since it’s about a mobile navbar animation that needs to play in reverse to exit it

I would suggest using a transition instead. It just makes it easier.

.mobile-navbar {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: -200rem;
  background-color: lightcyan;
  transition: left 0.4s ease-in-out;
}

.move-in {
  left: 0px;
}
2 Likes

Woah wait so ease-in-out basically adds animation for forward and backward?

No, that’s just the timing-function, you can use whatever you’d like for that.

It’s just how transitions work, it will transition back to its original position. But if you use the default linear timing it will be hard to see the “out” transition unless you increase the time.

Here it is with the default linear timing and a 2 seconds transition.

.mobile-navbar {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: -200rem;
  background-color: lightcyan;
  transition: left 2s;
}

.move-in {
  left: 0px;
  transition: left 2s;
}
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.