How to move an object on the screen, and make it disappear when it leaves the screen, without causing overflow-x?

[Blindado]

Hello!
Happy New Year to everyone!

I'm still learning and trying to understand how animations work and I've been facing a problem for a few days.
I made a page and placed a Layer that moves from left to right.
And this movement is carried out in the "animations" field on the Layer itself.
I used "animate-scroll-x" with duration "65000" to make it slower, as the Layer brings the image of a robot, like a message. However, this movement of the Layer, from left to right, is causing the horizontal scroll bar to appear (at the bottom of the screen). Because Layer goes beyond the page margins. And to fix this, I put overflow-x hidden in Page Propriate. It worked on Desktops, but on Mobile, the problem continues.
Is there any simpler way to fix this type of animation, without causing this problem.
I don't know if I was able to explain clearly what is happening with my page.
Thank you in advance for any help!
Thanks!

[Blindado]

I managed to make it work the way I wanted, however, I think it was a patchwork thing, hehe! But I managed it, creating another Layer, and sized it to fit inside it, the other previous Layer that performs the movement with animation. And the second Layer that I created now is configured in General [Type:] Docking layer. And in this way, I was able to limit the movement of the first Layer, within the limits of the second layer. Remembering that this was not happening when I opened my website on a mobile device, in this case a Smartphone. I need to master the CSS3 concept urgently

[Pablo]

If you need further assistance the please share a DEMO project, so we can see what you have done.
Although the behavior you have describe is logical, because moving the object will make the page longer.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134