Swaying animation during moving

src/App.jsx

@@ -28,10 +28,6 @@ export const App = () => {
                 <Player />
                 <Cubes />
             </Physics>
-
-            <group position={[3, 1, -2]}>
-                <WeaponModel />
-            </group>
         </>
     )
 }

src/Player.jsx

@@ -1,7 +1,8 @@
 import * as THREE from "three";
 import * as RAPIER from "@dimforge/rapier3d-compat"
+import * as TWEEN from "@tweenjs/tween.js";
 import {CapsuleCollider, RigidBody, useRapier} from "@react-three/rapier";
-import {useRef} from "react";
+import {useEffect, useRef, useState} from "react";
 import {usePersonControls} from "./hooks.js";
 import {useFrame} from "@react-three/fiber";
 import {Weapon} from "./Weapon.jsx";
@@ -17,6 +18,11 @@ export const Player = () => {
     const { forward, backward, left, right, jump } = usePersonControls();
     const objectInHandRef = useRef();
 
+    const swayingObjectRef = useRef();
+    const [swayingAnimation, setSwayingAnimation] = useState(null);
+    const [swayingBackAnimation, setSwayingBackAnimation] = useState(null);
+    const [isSwayingAnimationFinished, setIsSwayingAnimationFinished] = useState(true);
+
     const rapier = useRapier();
 
     useFrame((state) => {
@@ -46,12 +52,55 @@ export const Player = () => {
         // moving object in hand for the player
         objectInHandRef.current.rotation.copy(state.camera.rotation);
         objectInHandRef.current.position.copy(state.camera.position).add(state.camera.getWorldDirection(rotation));
+
+        const isMoving = direction.length() > 0;
+
+        if (isMoving && isSwayingAnimationFinished) {
+            setIsSwayingAnimationFinished(false);
+            swayingAnimation.start();
+        }
+
+        TWEEN.update();
     });
 
     const doJump = () => {
         playerRef.current.setLinvel({x: 0, y: 8, z: 0});
     }
 
+    const initSwayingObjectAnimation = () => {
+        const currentPosition = new THREE.Vector3(0, 0, 0);
+        const initialPosition = new THREE.Vector3(0, 0, 0);
+        const newPosition = new THREE.Vector3(-0.05, 0, 0);
+        const animationDuration = 300;
+        const easing = TWEEN.Easing.Quadratic.Out;
+
+        const twSwayingAnimation = new TWEEN.Tween(currentPosition)
+            .to(newPosition, animationDuration)
+            .easing(easing)
+            .onUpdate(() => {
+                swayingObjectRef.current.position.copy(currentPosition);
+            });
+
+        const twSwayingBackAnimation = new TWEEN.Tween(currentPosition)
+            .to(initialPosition, animationDuration)
+            .easing(easing)
+            .onUpdate(() => {
+                swayingObjectRef.current.position.copy(currentPosition);
+            })
+            .onComplete(() => {
+                setIsSwayingAnimationFinished(true);
+            });
+
+        twSwayingAnimation.chain(twSwayingBackAnimation);
+
+        setSwayingAnimation(twSwayingAnimation);
+        setSwayingBackAnimation(twSwayingBackAnimation);
+    }
+
+    useEffect(() => {
+        initSwayingObjectAnimation();
+    }, []);
+
     return (
         <>
             <RigidBody colliders={false} mass={1} ref={playerRef} lockRotations>
@@ -61,7 +110,9 @@ export const Player = () => {
                 </mesh>
             </RigidBody>
             <group ref={objectInHandRef}>
-                <Weapon position={[0.3, -0.1, 0.3]} scale={0.3} />
+                <group ref={swayingObjectRef}>
+                    <Weapon position={[0.3, -0.1, 0.3]} scale={0.3} />
+                </group>
             </group>
         </>
     );