Jump to content
GreenSock

Jose20

Horizontal scroll overflow problem

Recommended Posts

Greetings, I'm new to GSAP, I'm implementing a horizontal scroll, I'm following codepen's lead

It works well, however in my application when I inspect element this overflow happens

image.png.9515e187924a239d56cf569a69151152.png

 

As you can see on the right side there is a black overflow.

 

The problem is caused by this code line in CSS:

image.png.50f28167b6d050557684d75ef23f7add.png

Width equal to 600% Which without that statement, the scroll does not work.

I need to find a way to fix the error and not break my app when it opens on other screen sizes.

 

Thanks.

 

 

See the Pen XWmEoNg by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

 

2 hours ago, Jose20 said:

It works well, however in my application when I inspect element this overflow happens

 

Yes, it is related to the overflowing content making the viewport adjust.

 

So you might have to add another wrapper and set overflow-x: hidden to it.

 

Does that work for you?

 

See the Pen rNGpmJO by akapowl (@akapowl) on CodePen

  • Like 2
Link to comment
Share on other sites

Thank you, this worked for me.

7 hours ago, akapowl said:

 

 

Yes, it is related to the overflowing content making the viewport adjust.

 

So you might have to add another wrapper and set to it. overflow-x: hidden

 

Does that work for you?

 

 

 

Thank you, this worked for me.

Now, I would like to do a kind of phases of the moon, I have the following.

 

image.png.f6296ef87f44d4f26c899b233d0a5b41.png

The moon is in a fixed position, but I would like to move to phase 2 the moon to change to the next phase:

 

image.png.eab726d556286bb82b3067ec17aa8a9c.png

I have not managed to do it, I thought about something like this:

 

image.png.76e5b0133e86d75e76c5d3adfe579976.png

 

But the following moons are still hidden, I can't get that "phase change" effect.

Link to comment
Share on other sites

Sure, that sounds like it should be doable.

 

These forums don't offer how-to-build solutions, but if you start a new thread (since this is not really related to the topic any more), add a minimal demo of what you have tried and specify your question a bit, you will significantly increase your chances on getting some advice, if you're stuck there.

  • Like 3
Link to comment
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.
×