Scroll Animations on Mobile

I’ve been working on a site with a slider. All was well. With the release of scroll on mobile now working I have a minor but not deal breaker issue. The site loads but before I scroll, if you attempt to advance the slider (by swipe) then the entire page shifts left and a white edge appears. If you scroll down firs and let all the scroll interactions happen (the slide in from right for example) then you go back and swipe the slider it’s all fine. I’m sure this has to do with and element down the page that scrolls in from the right. Other than change the interaction is there a way to keep that space from happening?

I’d prefer not to link out at the moment but can if necessary.

Try to put overflow:hidden on your sections where you have animated elements.

after that your public link is required (:

1 Like

@vincent I’d already checked that but I’m wondering if overflow:hidden for the body would help. I’ll give it a try. I’ve noted similar quirk on many other mobile sites with animation that flows from right so maybe it’s just how it is. I’ll post back after.

When you hide the overflow from the body, you lose all kind of scrolling in your page, haven’t you noticed?

I’ve actually never hidden:overflow for the body so good to know. Saved me some time :smiley:

It’s Webflow Mistake #2 (:

Number one is not putting relative on a parent element when you go absolute (:

(my own stats hehe)

@vincent Soooo…it was the overflow setting. Even though I had overflow hidden set, somehow it hadn’t saved. I cleared the overflow setting, saved, changed back to hidden and re-saved…and now, all is well. Awesome.

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.