Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vilbe

White Space Problem on Mobile Devices

Recommended Posts

Hello Guys,

I've been looking around the internet and this forum for some time and I could not find a fix whatsoever.

I am currently working on my finals project and I've come across this white-space problem which seems to only occur on mobile devices. (In my case: iPhone 11)

 

I included a codepen () on which you can see the problem yourself. On a PC or Laptop, there will be no whitespace on the right side, however if you inspect this codepen on your mobile device you will notice while the animation hasn't finished playing, you can scroll all the way to the right like 1000px or something and as soon as all the elements that came in animated are finished with their animation, the whitespace somehow magically disappears and you can no longer swipe to the right. I am not quite sure how this affects a mobile device but not a pc or laptop.

 

I am fairly new to GSAP and I am sorry if this has already been answered somewhere.

Could you possibly teach me to properly position elements off the screen (to animate them in later) without causing excessive amounts of whitespace?

 

Thank you guys!

See the Pen KKwbzON by benvi (@benvi) on CodePen

Link to post
Share on other sites

Welcome to the forums, @Vilbe. This doesn't really sound like a GSAP-specific question and we really try to keep these forums focused on those as much as possible. I'd strongly recommend creating a reduced test case with only the bare minimum to reproduce the challenge - you'll have a MUCH better chance of getting an answer. Currently you've got 1000+ lines of code (HTML, CSS, JS) in the codepen that people would need to try to wrap their heads around. Simplifying things will probably help you learn better too, and it'll definitely make troubleshooting faster for everyone. 

 

Lastly, it looks like you have some CSS transitions applied in your CSS - be careful because those can cause conflicts when you try to animate something with BOTH JavaScript and CSS. I didn't dig to find out if you're actually creating conflicts - maybe those CSS rules don't affect what you're animating with GSAP but I figured I'd mention it just as an FYI. 

 

Happy tweening!

  • Like 1
Link to post
Share on other sites

Hi Jack,

First of all, thank you for taking the time to give me an appropriate answer.

I understand that this might be too much code for people to dig in. Although I was hoping that this might be a common Problem and people would not need to go into the code as much and that this is a common problem. 

 

I appreciate you mentioning the CSS transitions. I think I will just rewrite everything properly and perhaps then I will find the problem.

Just to avoid any unnecessary problems, I was wondering how you would go about positioning an element off the screen.

I would do it with either position: relative, or position: absolute and then to position it outside of the screen (left side for example) right: 101vw; or something along those lines.

 

Is there a better way of doing this, that I might have missed somehow?

Thank you.

Link to post
Share on other sites

Hi guys,

I updated the Codepen and removed a lot of unnecessary code. I did manage to fix the issue, although I am not quite sure how.

I will now try to fix it on my main project and once I find out what the problem was, I will make sure to write it here, as this might help another individual that is struggling with this problem.

  • Like 1
Link to post
Share on other sites
20 hours ago, Vilbe said:

I would do it with either position: relative, or position: absolute and then to position it outside of the screen (left side for example) right: 101vw; or something along those lines.

Yep, you could do that. But I'm more a fan of using transforms just so that when I animate things back into the screen, it's a bit more performant. You could use JavaScript (like getBoundingClientRect()) to figure out how far to translate the element to get it off the screen, or just overdo it a bit if it doesn't need to be exact, like transform: translate(100vw, 0) for example. 

 

16 hours ago, Vilbe said:

I will make sure to write it here, as this might help another individual that is struggling with this problem.

That's great! We love when folks in these forums help others by posting solutions. 👍

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×