Changing animation when moving horizontally without flipping sprite

Hi, I have been having this problem for a few days so I decided to ask here. I am working on a 2D platformer game using Animator Controller. My character was able to move horizontally by using one sprite sheet for horizontal movement flipped over by multiplying -1 to the x scale everytime it needed to.

 private function Flip() {
     var theScale:Vector2 = smileyFace.transform.localScale;
     theScale.x *= -1;
     smileyFace.transform.localScale = theScale;
 }

This was crucial part because my character had to bounce off the wall when it hits the wall. I made it so that the character would bounce off the wall by 1) changing its target position, and 2) flip the sprite horizontally.

However, I noticed that the shading on my character looked wrong when flipped over horizontally so I decided to create separate animation set for moving left and right. So I created new sets of sprite sheets and created animation states accordingly. I took the Flip function out of the original code. Now, my character can move horizontally with correct animations.

The problem came when I was trying to bounce off the wall. My bounce would not work anymore. It would completely ignore my bounce function and just jitter around until it goes through the wall. I was trying to figure out hard to find what parameter is not being updated correctly. It was updating moving direction and its new target position but twice in a row to nullify the bounce and force itself to go through the wall.

After trying to fix my code for several hours, I have found out that my character will bounce off fine if I put the Flip function back in. Well...bounce works fine but the image is now flipped over so the animation is off. So what did I do? call Flip function twice. Now everything works as I have planned. But why do I have to flip the image to make my character bounce? This should be completely unnecessary.

 function HitWall() {
     // swap current position and target position for bouncing back
     var tempPos:SmileyPos;
     tempPos = smileyPos;
     smileyPos = targetPos;
     targetPos = tempPos;
     
     startX = ColToX(smileyPos.col);
     targetX = ColToX(targetPos.col);
     
     // updating moving time
     moveStartTime -= (1.0f - hMoveFrac) - hMoveFrac;
     hMoveFrac = 1.0f - hMoveFrac;
     
     movingRight = !movingRight;
     movingLeft = !movingLeft;
     anim.SetBool("moveRight", movingRight);
     anim.SetBool("moveLeft", movingLeft);
     
     var animationName:int;
     if (movingRight && !movingLeft) {
         animationName = Animator.StringToHash("Base Layer.move_hRight");
     }
     else if (movingLeft && !movingRight) {
         animationName = Animator.StringToHash("Base Layer.move_hLeft");
     }
     anim.Play(animationName, 0, 1.0f - anim.GetCurrentAnimatorStateInfo(0).normalizedTime);
     
     //why is this required??
     /*Flip();
     Flip();*/
 }

So here's my code for when my character hits the wall. HitWall function is called by the Character Controller from its OnCollisionEnter2D function.

Here's the Animator state of the game.