Jump to content
GreenSock

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

ScrollTrigger width of page increase where markers are set to false

Recommended Posts

I'm using scrollTrigger to scale the svg used in clip path but the page width is slightly greater than 100vw and height also seem to be a bit more as my center component also scroll a bit up at the end but however when i set markers to true this problem is magically gone and im scratching my head to find a reason for this behaviour can someone help my understand this issue better

 

#EDIT: This was because the initial page (without ScrollTrigger) has no scroll so when ScrollTrigger adds scroll to the page. I.e. Say your page is 1830px initially but then ScrollTrigger puts a 17px scroll bar on the page now your viewport is 1813px but the content is already painted according to 1830px to compensate this 17px extra width the page shows a horizontal scrollbar it can be solved by  using

body {overflow-y: scroll;}

Using this will initially put a scrollbar does solving the issue alltogether

 

What have i learned from this:

The main cluprit of this was the pin-spacer div creater by scroll trigger I dont know why but it was wider than the viewport width (1830px compared to 1813px in my case) and at the bottom of the scroll something triggred some a change in trigger element style from.     

transform: translate3d(0px, 0px, 0px);
left: 0px;
top: 0.001px;
margin: 0px;
width: 1830px;
height: 890px;
padding: 0px;
box-sizing: border-box;
max-width: 1830px;
max-height: 890px;
position: fixed;

to

transform: translate3d(0px, 890.001px, 0px);
left: 0px;
top: 0px;
margin: 0px;
width: 1829.52px;
height: 889.524px;
padding: 0px;
bottom: auto;
right: auto;

this didnt make any sense for me

 

#Solution for this [Techincally just a workaround using css]

Enable markers in gsap (because everything is fine when markers are enabled)

then use this css rule to hide the markers

div[class^="gsap-marker-"] {
	visibility: hidden;
	opacity: 0;
}

 

See the Pen oNxLLqp by nony14 (@nony14) on CodePen

Edited by Nony
Reason for the behaviour found
Link to post
Share on other sites

Hey Nony and welcome to the GreenSock forums.

 

5 minutes ago, Nony said:

but however when i set markers to true this problem is magically gone and im scratching my head to find a reason for this behaviour can someone help my understand this issue better

Setting markers: true adds the markers to the DOM. In some circumstances this changes your total amount of scroll on the page. 

 

I'm not really understanding what you're asking about though. Could you try to explain it in a different way?

Link to post
Share on other sites
9 minutes ago, ZachSaucier said:

Hey Nony and welcome to the GreenSock forums.

 

17 minutes ago, Nony said:

but however when i set markers to true this problem is magically gone and im scratching my head to find a reason for this behaviour can someone help my understand this issue better

Setting markers: true adds the markers to the DOM. In some circumstances this changes your total amount of scroll on the page. 

 

I'm not really understanding what you're asking about though. Could you try to explain it in a different way?

Hey ZachSaucier, 

I'm trying to say that when i set markers to false i see a horizontal scroll bar but setting it to true the scroll bar dissappear which is expected behavior. So why setting markers to false is increasing with of the `pin-spacer` div created by gsap scrolltrigger. 

Link to post
Share on other sites

I'm not seeing a horizontal scrollbar with markers: false on Mac in that pen that you provided. Does that demo show scrollbars for you?

Link to post
Share on other sites
5 minutes ago, ZachSaucier said:

I'm not seeing a horizontal scrollbar with markers: false on Mac in that pen that you provided. Does that demo show scrollbars for you?

Yes i see a horizontal scrollbar in the pen with markers set to false. I've attacked a screenshot of pen with markers true and false

this with markers: false

2077260606_Annotation2020-08-17185750.thumb.png.fa61f6ce8eb8342cdb2eba00aaae4b62.png

 

and this with markers: true

1860895262_Annotation2020-08-17185820.thumb.png.fad01ada87bb27713ae2979bf0097e50.png

Link to post
Share on other sites

The culprit here is pin-spacer div created by gsap in my browser when markers are false the width of pin-spacer is 1830px. And when marker are true the width is 1813px

 

Link to post
Share on other sites
22 minutes ago, Nony said:

The culprit here is pin-spacer div created by gsap in my browser when markers are false the width of pin-spacer is 1830px. And when marker are true the width is 1813px

 

Currently as a workaround I've used css to hide markers 

Note: Setting display: none !important brings back the initial issue.

div[class^="gsap-marker-"] {
	visibility: hidden;
	opacity: 0;
}

this will hide all the marker elements created by scrollTrigger

Link to post
Share on other sites

I think this is a bug in ScrollTrigger on Windows devices when the parent has display: flex;.  Changing that removes the horizontal scrollbar. Here's a more minimal demo (but thanks for you pretty minimal demo, Nony!):

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

  • Thanks 1
Link to post
Share on other sites

I can see the scroll bars on a mac on chrome.

 

It looks like the pin spacer is calculating it's width to include the vertical scroll bars and it does seem to be linked to display:flex on the .home element. Though it doesn't seem limited to Windows. 

 

You can see this if you set css for .pin-spacer {width:100% !important;max-width: 100% !important} to override the supplied values by gsap.

 

body{overflow-x:hidden} should work as a catchall to hide the horizontal bars but it does look like a bug that may be worth investigating

  • Like 1
  • Thanks 1
Link to post
Share on other sites

Actually, I don't think this has to do with display: flex or anything like that. I believe this is an edge case where you're applying ScrollTrigger to a page that has NO SCROLL initially, thus there's no scrollbar in its natural (pre-ScrollTrigger) state. That's also why adding markers: true "fixes" it, because those markers are down below the bottom of the viewport, thus it forces a scrollbar to appear and since you've got things set to 100% width, it's affected by the vertical scrollbar. 

 

As far as I can tell, a simple solution is to just set overflow-y: scroll on your scroller (<body>), right? 

 

I can look into adding code to ScrollTrigger to attempt to automatically sense a condition like this and force overflow to be scroll. I really doubt that many people will be setting up ScrollTrigger pages that are so short they don't scroll in their initial state, though :)

  • Like 1
  • Thanks 1
Link to post
Share on other sites

Okay so in layman's terms the initial paint calculate width as if there is no scroll bar. And when gsap does its magic and calculates the scroll to put on the page and to compensate to space taken by the scroll bar on the viewport it shows horizontal scroll bar this makes a lot of sense now thank you all for your immense support. 

  • 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.

×