Reports

I have resolved the issue by instead of changing the state of the arm when acting silly interrupting the animation. I created a second arm that would be hidden when the soldier is not acting silly until the state changes while the original arm would remain but be hidden when the state was true leaving the animation uninterrupted keeping it aligned with the leg.

Additionally I place the arms and legs in left and right containers to ensure that they had similar properties.

SillySoldier.js

import { useEffect, useState } from 'react';
import Body from './Body';
import Arm from './Arm';
import SillyArm from './SillyArm';
import Leg from './Leg';

function SillySoldier(props){
  const [silly, isSilly] = useState(false);
  const [caught, isCaught] = useState(false);
  const [hidden, hide] = useState(false);

    useEffect(() => {
      //Randomly act silly
      if(props.inspecting === false) {
        let timer = setTimeout(() => {
            isSilly(() => true) 
            setTimeout(() => {
              props.soldier.caution = Math.floor(Math.random() * (6 - 1 + 1)) + 1
              isSilly(() => false);
            }, 500)
        }, props.soldier.caution*1000);
        return () => clearTimeout(timer)
      }
    });
    //Check if caught
    useEffect(() => {
      if(props.inspecting && silly){
        isCaught(()=>true);
      }
    }, [props.inspecting, silly]);
    //Remove caught soldiers
    useEffect(() => {
        let timer = setTimeout(() => {
          if(caught) {
           hide(true);
           props.soldier.caught = hide;
          }
        }, 1000);
        return () => clearTimeout(timer)
    });
  var standard = {
    body: "/image/Silly_Soldier1.png",
    leg1: "/image/Soldier_Leg_Left1.png",
    leg2: "/image/Soldier_Leg_Right1.png",
    arm1: "/image/Soldier_Arm1.png"
  }
  var fooling = {
    body: "/image/Silly_Soldier2.png",
    leg1: "/image/Soldier_Leg_Left1.png",
    leg2: "/image/Soldier_Leg_Right1.png",
    arm1: "/image/Soldier_Arm2.png"
  }
  var loss = {
    body: "/image/Silly_Soldier3.png",
    leg1: "/image/Soldier_Leg_Left1.png",
    leg2: "/image/Soldier_Leg_Right1.png",
    arm1: "/image/Soldier_Arm2.png"
  }
  const status = caught ? (loss) : (silly ? (fooling) : (standard))
  return (
    hidden ? (<div className='silly' id='soldier'></div>) :
    (<div className='silly' id='soldier'>
      <div className='left'>
        <Arm img={status.arm1} marching={props.marching} silly={silly} caught={caught} />
        <Leg img={status.leg1} marching={props.marching} />
      </div>
      <Body img={status.body} />
      <div className='right'>
        <Arm img={status.arm1} marching={props.marching} silly={silly} caught={caught} />
        <SillyArm img={status.arm1} marching={props.marching} silly={silly} caught={caught} />
        <Leg img={status.leg2} marching={props.marching} />
      </div>
    </div>)
  )
}

export default SillySoldier

Arm.js

function Arm(props) {
  return (
    <div className="arm" style={reactjsreactjsreactjs
      props.marching ? (
      props.silly? {
        visibility: "hidden"
      }:{
        visibility: true
      })
      :(
        props.caught ? {
          visibility: "hidden"
        }:{
        animation:'none',
          visibility: true
        }
      )}>
      <img src={process.env.PUBLIC_URL + props.img} alt='arm' />
    </div>
  )
}

export default Arm;

SillyArm.js

function SillyArm(props) {
  return (
    <div className="fooling" style={props.silly||props.caught?{visibility: true}:{visibility: "hidden"}}>
      <img src={process.env.PUBLIC_URL + props.img} alt='arm' />
    </div>
  )
}

export default SillyArm;

Leg.js

function Leg({img, marching}) {
  return (
    <div className="leg" style={marching ? ({}):({animation:'none'})}>
      <img src={process.env.PUBLIC_URL + img} alt='leg' />
    </div>
  )
}

export default Leg;

App.css
.arm {
  position: absolute;
  top: 53%;
  padding-left: 6.65%;
  transform-origin:65% 40%;
  animation: none;
}

.leg {
  position: absolute;
  top: 68.5%;
  padding-left: 6.25%;
  transform-origin:60% 40%;
}

.left > .leg,
.left > .arm {
  animation: march_left 2.5s linear infinite;
}

.left > .fooling,
.right > .fooling {
  position: absolute;
  top: 52.5%;
  padding-left: 7.65%;
}

.right > .leg,
.right > .arm {
  animation: march_right 2.5s linear infinite;
}

Result: https://wildwood44.itch.io/silly-soldiers

79776049