jquery animation – shapes moving in linear motion

I want the shapes to reappear from the right as soon as they start to disappear on the left. For example, if I have square1, circle1, and star1 in a row moving from right to left, as soon as square1 begins to disappear on the left, it should immediately reappear on the right, without waiting for circle1 or star1 to disappear. I want to implement this using jquery.

function startAutoScroll() {
        const $track = $('.track');
        const $shapes = $('.shapes');
        const trackWidth = $track.width();
        const containerWidth = $('.track-container').width();
        const shapeWidth = $shapes.first().outerWidth(true); // Width including margin
    
        // Speed of scrolling based on slider value
        const scrollSpeed = 1; // Adjust as necessary for smoother scrolling
    
        // Continuous scrolling of the track
        autoScrollInterval = setInterval(function() {
            if (!isHovering) {
                let currentLeft = parseInt($track.css('left'), 10);
                let newLeft = currentLeft - scrollSpeed;
    
                // Reset track position to create a continuous effect
                if (Math.abs(newLeft) >= trackWidth) {
                    newLeft = 0;
                }
    
                $track.css('left', `${newLeft}px`);
            }
        }, 100 / autoScrollSpeed); // Interval time for smooth scrolling
    
        // Animate shapes with seamless looping
        function animateShapes() {
            const totalShapesWidth = $shapes.length * shapeWidth;
    
            // Position shapes outside the container initially
            $shapes.each(function(index) {
                $(this).css('left', containerWidth + index * shapeWidth + 'px');
            });
    
            // Animate shapes
            $({ offset: containerWidth }).animate(
                { offset: -totalShapesWidth },
                {
                    duration: 10000 / autoScrollSpeed, // Adjust duration based on speed
                    easing: 'linear',
                    step: function(now) {
                        $shapes.each(function(index) {
                            let offset = now + index * shapeWidth;
                            // Ensure the shapes wrap around seamlessly
                            if (offset <= -shapeWidth) {
                                offset += totalShapesWidth;
                            }
                            $(this).css('left', offset + 'px');
                        });
                    },
                    complete: function() {
                        // Ensure the animation loops correctly
                        animateShapes(); // Loop animation
                    }
                }
            );
        }
    
        animateShapes(); // Start shape animation
    }