HELP! Animation Causing Mobile Problems

Hi,

We’re having trouble with an animation which we think is causing an issue where the page is stretched too far to the right. Images below on mobile, if you scroll to the left it shows a white empty space.

We would like the drone to animate out view but then comes into view without causing this issue, any help would be great. Thanks.

https://drone-motion.webflow.io

Hey @DroneMotion. I’m assuming the container of the animation is larger than the screen width. What you could do is make sure the container is 100% width, and make sure to set Overflow to Hidden. That way when the drone is out of the screen, the extra white space will not be created.

Hope this helps, cheers!

Hi Finn,

Thanks for the reply. That makes sense, I’ve changed the Overflow to Hidden, but i can’t seem to change the container width at all. Any ideas on how to do this?

PS: I’ve added a screenshot of the container boundaries.

55

Oh you are using a container (it’s like a responsive div, but the width is locked). Replace it with a DIV element instead, you’ll be able to control the width at every breakpoint.

Hi Finn,

Right I see! I tried doing that but still no luck. I even deleted everything in that section and it still happens. What do you think could be doing this?

Thanks.

Could you share your read-only link? I can check out the webflow project itself and try to find a solution.

1 Like

Sorry I thought I had, here we go:

https://preview.webflow.com/preview/drone-motion?utm_medium=preview_link&utm_source=designer&utm_content=drone-motion&preview=e1083ec30047c29d708b5d4fc6015635&mode=preview

Bump. This is happening on another website of mine. If an animation goes off the screen on desktop, it’ll cause mobile view to scroll all the way off the page.

Here is a read only link: Webflow - Taps & Toilets