How to stop Horizontal Bar

[Sphinx]

I am sure this question has been asked before but I don't know exactly how to phrase my issue. A problem I am having right now is that when I rotate an image around 360 degrees, or when I scale it up, it sometimes goes beyond my viewport or current screen width. When that happens the horizontal bar stretches before rebounding back to the start of the animation (when it's on repeat) or disappearing when I scroll. 

 

How can I stop that from happening.

 

I like the scaling effect, but would like it to scale within the current viewport or div.

[Jonathan]

Hello Sphinx, and Welcome to the GreenSock forum!

 

It could be the way you are calculating the viewport width and height?

Do you have a code example so we can see your code in context?

Here is a video tut on how to create a codepen example.

This way we can test your code live on codepen to better help you!

Thanks!

[Sphinx]

Thanks Jonathan, I have a codepen. I was just hoping it was a common problem with a simple solution to avoid compiling all the links into codepen :D , but . I quickly put this together on codepen: 

See the Pen kkPEJd by eternal_wanderer (@eternal_wanderer) on CodePen

 , hopefully that can help ^^

[Jonathan]

Thank you for the codepen example, much better.

 

When you say the "horizontal bar stretches before rebounding back" ..

 

Is the horizontal bar the one with the background image? If so i do not see it stretch, but scale out.

 

Or do you mean the browser horizontal scrollbar? That i do see growing due to the element scaling increasing the document width and height.

 

For that you can add the CSS property overflow:hidden on the body tag or on your main containing element.

 

See the Pen PGkBPp by jonathan (@jonathan) on CodePen

 

body {
   overflow:hidden;
}

Does that help?

 

[Sphinx]

Or do you mean the browser horizontal scrollbar? That i do see growing due to the element scaling increasing the document width and height.

 

 

YES that's the one! 

 

It did solve the problem ! But created a new problem that prevented me from scrolling past that first div. I put overflow-x and that fixed the problem: 

See the Pen kkPEJd by eternal_wanderer (@eternal_wanderer) on CodePen

 but now the rotation scale overflows into the next div, is there a way to stop it from overflowing into the next div as well. I'm writing two different versions of the code, and one of my versions is rotation and the other is scale. The one I linked I think is the scale version so sometimes I mix the two up when writing here, but have the same problem in either version.

 

Will overflow-x prevent me from using horizontal parallax?

[Jonathan]

overflow-x shouldn't prevent horizontal parallax from working. But keep in mind that overflow-x and overflow-y are not fully standard, so even though they are supported, you might have buggy behavior due to those CSS properties being just a working draft of the CSS spec. But you could play it safe and just use overflow-hidden to make sure no scrollbars display regardless.

 

You would need to adjust your other div tag containers so they have a higher z-index. And bring the other div container that is being overlapped on to its own rendering layer so it can create a new stacking context and be above the red scaled div.

 

But I don't have time right now since I would have to add and adjust your html markup and CSS. I will have to wait until I have more time since that is more of a CSS and HTML question of layout and positioning, but not really about the GSAP API. So I have to wait until I have done free time to debug your codepen

[Sphinx]

Thanks Jonathan! I think if it's just a matter of HTML/CSS I can play around with it! That is a great tip and something I can definitely do!