Jump to content
Search Community

ScrollTrigger behaving differently if target is a container instead of the body

iDad5 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Ok. So.

 

You have a minimal working demo that snaps on the last panel - 'Panels in body II' - so we don't need to help you to find a solution there.
 

Quote

The page we are talking about is the front page on one of my most important customers. It has not been working on mobile now for over 2 weeks.

This broke when updating to 3.11.4, correct? Does this work using 3.11.5? And by 'not working' you mean 'not snapping on the last section'?

 

Quote

When I started integrating  'Panels in Body II'  (the one working solution I had at the time) my actual project, scrollTrigger.scroll(toPosition) stopped working.

I just added a scroll(100) into a delayed call in 'Panels in Body II' and it works ok here

See the Pen wvxZNyV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Can you provide us with an example that shows scrollTrigger.scroll() not working? Can you explain what you mean by 'not working'?

So just to clarify - right now we have a working minimal demo using the latest version that snaps and successfully scrolls
We have a complex site that works on an earlier version of GSAP, breaks on 3.11.something? and works(?) with 3.11.5?

What is it that you need from us to move forward here?

Link to comment
Share on other sites

If you're trying to work out why 'panels in body' doesn't snap to the last section - Jack's explained this.

 

Quote

If I understand your dilemma correctly, the problem is that you're telling ScrollTrigger NOT to refresh when the window resizes, thus when the address bar shows/hides on iOS and it completely resizes the page, you now have inaccurate start/end values because no refresh() happened, thus the snapping points are off. Your content changed size (which of course would affect the snapping positions) but you prevented ScrollTrigger from refreshing those, so the snapping kicks in to the wrong spot.


This is a fork of 'panels in body' with markers enabled. You can see that because refresh isn't being called when the window resizes, the final marker position is off and it doesn't ever hit that point - therefore it doesn't snap.

https://cdpn.io/pen/debug/MWBRxKE
 

This is a fork of 'panels in body' with markers enabled. In this one we are allowing refresh on resize. The final marker position gets adjusted, so it can reach the final marker and it can snap.


https://cdpn.io/pen/debug/ExpJMyR

Link to comment
Share on other sites

On 2/6/2023 at 7:22 AM, iDad5 said:

That is not the problem, as far as I understand it. The way things are built, neither the body nor any other container change size (height) when the address bar is retracting or expanding again. I have verified that in the dev-tools on my connected Mac often.

The window changes height and the scroll markers are positioned relative to the window.

Link to comment
Share on other sites

7 minutes ago, Cassie said:

This broke when updating to 3.11.4, correct? Does this work using 3.11.5? And by 'not working' you mean 'not snapping on the last section'?

I cannot say exactly when it broke.

I know that it worked (not supper smooth but mostly ok) on iPhone when we deployed the page, and the last time I extensively tested it on mobile, which must have been about half a year ago.

 

As confirmed by/with Jack in this thread some change in a recent update made the way I worked with ScrollTrigger kill and create a new behave.

I did not notice it at the time, as I did some testing on another page, but took only cursory glances at the front-page. 

 

This issue was solved by the 3.11.5 update.

 

It solved the issue on desktop and on mobile too according to first test. But now on mobile, the not sticking to the last panel occurred. 

We did not have that in the past. I can only guess that it is related to browser-updates, maybe in relation to the new suppor for shv, lhv and dhv. Just a guess.

 

Thanks to you all, I had a solution to both issues. 

 

But when I started using pinSpaceing true for the creation of the ScrollTrigger after the kill and rebuild, ScrollTrigger scroll() reported to be scrolled but was not on the screen. A different problem than before. (All Systems)

 

Reverting to the pinSpaceing false method made everything work again, but left the iOS Problem.

 

I'm working on a demo, but there's a lot of complexity to deal with. 

 

Link to comment
Share on other sites

3 minutes ago, Cassie said:

The window changes height and the scroll markers are positioned relative to the window.

That is likely the reason the 100vh in the body work better than the 100%, as I understand it now.
At least the height of the body does not change that way, when the interface retracts. 

 

Why that makes a difference with the pinSpacing true approach, but does not help with the pinSpacing false method I do not understand. 

Link to comment
Share on other sites

Ok. So.

1 - Your site works using 3.11.5 - It broke in a previous version, Jack's explained the regression and apologised. - solved

2 - This demo https://cdpn.io/pen/debug/wvxZNyV works with snap and scroll() - There isn't a bug on our end - solved
3 - We've explained why the demos without refresh enabled aren't snapping - solved

Ok. This is a new issue. Could you make a minimal demo showing .scroll not working?

Quote

But when I started using pinSpacing true for the creation of the ScrollTrigger after the kill and rebuild, ScrollTrigger scroll() reported to be scrolled but was not on the screen. A different problem than before. (All Systems)

 

Quote

Reverting to the pinSpacing false method made everything work again, but left the iOS Problem.

This is likely the same issue as #3, add markers. Is the final marker being hit?

What is it that you need from us to move forward here? Are there actionable steps you need our help to solve?

  • Like 1
Link to comment
Share on other sites

2 minutes ago, Cassie said:

3 - We've explained why the demos without refresh enabled aren't snapping - solved

That is not entirely what I understand, as two of the demos that snap have refresh disabled. 

 

4 minutes ago, Cassie said:

This is likely the same issue as #3, add markers. Is the final marker being hit?

I do not think so, as neither version has refresh enabled.

 

5 minutes ago, Cassie said:

Ok. This is a new issue. Could you make a minimal demo showing .scroll not working?

As I said, I'm working on it, once I have it working I will post is as a new thread, I guess?

 

6 minutes ago, Cassie said:

What is it that you need from us to move forward here? Are there actionable steps you need our help to solve?

There are things I would like to understand better 'here', but nothing that's really actionable or blocking next steps.

Link to comment
Share on other sites

Quote

 

3 - We've explained why the demos without refresh enabled aren't snapping - solved

That is not entirely what I understand, as two of the demos that snap have refresh disabled. 

 

Well, the spreadsheet is useful here - Both of those have pinSpacing:true so there's space available to scroll into.
 

Link to comment
Share on other sites

5 minutes ago, Cassie said:

Well, the spreadsheet is useful here - Both of those have pinSpacing:true so there's space available to scroll into.
 

Then we had a misunderstanding here, I thought by " without refresh enabled" you meant that ScrollTrigger's refresh is called onResize, as set or unset in ScrollTrigger.config();

That would be the column before pinSpacing in the spreadsheet. 

 

When using pinSpacing false, I do create the same amount of space to scroll by sizing the container to the combined height of all panels.

Link to comment
Share on other sites

  • Solution
Quote

When using pinSpacing false, I do create the same amount of space to scroll by sizing the container to the combined height of all panels.


Sure. But this is calculated on page load. Before the browser bar minimizes, so when the browser bar disappears there's then a disparity in size. This is why allowing refresh is fixing the issue and why pinSpacing:true is fixing the issue.

Because then there's space to scroll into

If you create a little more space to scroll into manually (line 53, added 150px) then it has enough space to hit the final trigger.

See the Pen mdjgYWG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

https://cdpn.io/pen/debug/mdjgYWG - debug view

The final version on your spreadsheet looks like an outlier because it has pinSpacing:true, and it allows refresh but it's still not snapping.

But this is just because you have a hardcoded end value that doesn't change. If you adjust that to a functional value that actually recalculates on refresh then it works. (functional value on line 24)

See the Pen OJwGYaK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

https://cdpn.io/pen/debug/OJwGYaK - debug view

In every pen that isn't snapping to the last section, there's just not enough space to scroll into, either due to hardcoded values that aren't updating, pinSpacing:false and not enough page height or due to the markers not being recalculated on refresh.

Are we on the same page?

  • Like 2
Link to comment
Share on other sites

Thank you for the explanation. I have to think it through to fully understand it, I guess.  But it sounds very much like the piece I was missing.

(I was thinking in this direction already and had added generous extra space at some point to both variants, unsuccessfully, but I cannot be sure about the circumstance)

 

I just now opened a new thread for the ScrollTrigger.scroll() problem. As this issue also occurs on desktop, I am quite certain it is not connected to what I just learned.

 

Thank you again.

Link to comment
Share on other sites

1 hour ago, Cassie said:

But this is just because you have a hardcoded end value that doesn't change. If you adjust that to a functional value that actually recalculates on refresh then it works. (functional value on line 24)

 

As my full project has to kill and rebuild the ScrollTrigger on resize, that issue should be solved then. If the new issue had not occurred, while reimplementing my custom resize/refresh, we would likely have saved a lot of time and energy. But I would not have learned so much from you. Thank you so much for your patience.

  • Like 1
Link to comment
Share on other sites

Quote

(I was thinking in this direction already and had added generous extra space at some point to both variants, unsuccessfully, but I cannot be sure about the circumstance)

You'd need to have more space to scroll into than wherever your end marker was. So even if you added loads of space, unless it was around 200px more than the end marker, you would still have the same issue ☺️

Glad we got there in the end though. Jack's got the other thread, looks like a timing issue, but the working demo in that thread (with snapping issues on IOS) could be solved with this information here too.

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, Cassie said:

You'd need to have more space to scroll into than wherever your end marker was. So even if you added loads of space, unless it was around 200px more than the end marker, you would still have the same issue ☺️

Glad we got there in the end though. Jack's got the other thread, looks like a timing issue, but the working demo in that thread (with snapping issues on IOS) could be solved with this information here too.

 

Actually, I'm sure it was way more than, 2000px, but with what Jack finally got in my thick skull in the other thread I can understand why it likely would not have worked.

 

I thank you very much for all the time you spent on me. I sincerely hope that others might profit from that in the future so that it is not wasted on me alone.

  • Like 1
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.
×
×
  • Create New...