SVG being cut off while rendering on website screen with overflow

I'm trying to make a parallax effect train animation for a personal project. This was done by translating the background svgs (translateX) at different speeds. I have achieved this using animejs library. However, during animation the SVG gets cut off in between as shown below.

I have tried the following things before to resolve the issue

• overflow : visible
• Fiddling with the view box of the SVG

both of them didn't work

Not sure if it's an issue with SVG or the CSS used to render it on the website

Here is the codesandbox link Codesandbox Train Animation

As mentioned by Salil Rajkarnikar, just removed the clip-path property in the svg and it worked.