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

TLDR: Yes, I do have two simple solutions for one simple problem*. I would not bother anyone in the forum if looking at those, in isolation, could solve my issue. 

It is the confusing part that I'm lost in.

I understand that no one likes the confusing part and would like me to break it down in easy to solve bits. But I already did that on my own. 

I take things apart, fix them isolated, but when I put them back together things break again—in another way. 

 

I try again, as I'm desperate, but I do understand that I cannot expect anyone to take the time and effort to dig through the confusing part. And I'm already and forever grateful for all the time anyone has put into my difficulties.

 

1 hour ago, GreenSock said:

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.

 

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.

But I will dig deeper into that as soon as I can.

(In my original project, I either have to deal with a resize in more ways than the re-layout of the ScrollTrigger, that's why I kill and rebuild it. Alternatively, I will have to make sure not to let the content change its size, which I do now.)

 

1 hour ago, GreenSock said:

You lost me again in that wall of text, links to 8 different CodePens or previous posts, summaries, rephrasings, references to the "main problem" (verses side problems?), "B version of demo 3", demo 2, Version A, version B, etc. 😬

 

Yes, I fully understand that this is frustrating. No one better than me because I suffer with the situation for days now, each time I thought I fund a reproducible solution for one difficulty, the thing behaves the other way around in the next step. 

 

2 hours ago, GreenSock said:

 

If that's not the "main problem", please give it another shot in "explain it to a 5 year old" (or an old guy with COVID brain) mode :) 

I'm certain that your brain—even in covid-mode—is much superior to mine.

 

The 'not snapping at the last panel on iOS' problem I'm having right now, I though was solved by using Version B. And it was consistently until it did no longer.

 

In the next step, I went on to cautiously trying to implement my 'rebuild on resize' method.

(The one that had broken before after working for over a year, and you helped me fix it in the last thread with the beta version of ScrollTrigger 3.11.5.)

Everything seemed to work, except the last step that should send the system back to the panel it showed before the resize.

(that had worked on Saturday with version A—before I stumbled over the 'not snapping at the last panel on iOS' thing)

ScrollTrigger reported (logged) that It was at the intended position, but it didn't show at the scrollbar or the timeline. Even manually sending the time-line to the desired position of forcing a ScrollTrigger update did not change a thing, on any system. While researching into that issue, I found that the not snapping on iOS had reappeared, for no reason I could find.

 

So, I went back a step and tried to understand and solve the 'not snapping at the last panel on iOS' again. (Any workaround to that problem would likely involve me manually setting the ScrollTrigger scroll() and/or the timeline...)

 

*the two isolated problems: 

 

2 hours ago, GreenSock said:

I was hoping for more like "here's one simple CodePen...when I set autoRefreshEvents to only DOMContentLoaded (line 22), snapping won't work at the very bottom (it'll scroll back up)" 

 

That is exactly the case in demo 3 as stated there:

 

6 hours ago, iDad5 said:

You (hopefully) can reproduce that by commenting on lines 22 and following in and out in

—testing on iOS/iPadOS. (For me commented out it works in iOS, commented in it never sticks at the last panel/label).

 

My statement likely became unclear due to the unsless 'on' and the embedded CodePen which replaced the linked text 'here'.

 

The fact that in this one case there is an easy to see causality and solution in itself is worth nothing.

 

The solution (to simply not limit refresh), would work in this case, but it does not in the next even though it works the same way.

 

I have a similar situation with 'Version B' as solution.

 

It itself is five-year-old-friendly: demo 1 does not snap at the last panel, changing ScrollTrigger creation to Version B makes it work.

 

So, the broken down and simplified versions you wish for I have already shown them here, including their supposed solutions. But those lead me nowhere.

 

 

 

 

 

 

 

 

 

Link to comment
Share on other sites

The current issue is.

 

The version in the body - snaps at last panel on IOS - https://cdpn.io/pen/debug/KKBJKrE 
This is desired behaviour
 

The version in a 'window' - does not snap at last panel on IOS - https://cdpn.io/pen/debug/zYLeYev 
This is not desired behaviour

 

@iDad5 - could you confirm that this is the issue?


--- note from Cassie

I took a look at these two demos. I can't see the issue on the window version at all so I couldn't test this. For me it just scrolls out of view, completely broken.

I attempted to fix and simplfy this pen so that we can debug.

 

  • I took a look and there was a typo this.panels.lenght
  • There was also a height being set on the container which was causing overflow and making the demo unusable, I commented that out too

 

@GreenSock

Here's a simplified example for debugging. It's exactly the same as the original from iDad, I just removed the code from the classes and function calls and fixed the typos

@iDad5 - Does this demo show the issue for you? Have I correctly simplified it? Please respond in as few words as possible. I think we're all struggling to follow this thread a little!


See the Pen vYaPovR?editors=1011 by GreenSock (@GreenSock) on CodePen


---

debug link for viewing on iphone - https://cdpn.io/pen/debug/vYaPovR

Link to comment
Share on other sites

1 hour ago, Cassie said:

The version in the body - snaps at last panel on IOS - https://cdpn.io/pen/debug/KKBJKrE 
This is desired behaviour

It snaps when I follow the link from your post directly, likely as I'm getting a non logged in version where the actual code is buried deep in an iframe. I don't understand why I get this version.

When I follow the link from my codePen into the plain debug version, this version, it does not snap.

The version of that iteration that snaps is 

See the Pen yLqwXBp by iDad5 (@iDad5) on CodePen

But maybe you get a different version from me.

 

I abandoned the “window” approach on Saturday as it was always very jittery, even your super simplified version looks bad on an iPhone 12 proMax.

 

1 hour ago, Cassie said:

Does this demo show the issue for you?

No it does not, it sticks after a lot of jittering at some point.

 

1 hour ago, Cassie said:

Have I correctly simplified it?

It looks like, but as the “window” approach seems to be not working for me, this might be a moot point. 

 

1 hour ago, Cassie said:

Please respond in as few words as possible. I think we're all struggling to follow this thread a little!

I'm sorry that I am/was so annoying. Thank you very much for your patience.

 

FYI: Your last link opens in a non iframe / debug version for me, in contrast to the first two links. I don't understand why this is.

Link to comment
Share on other sites

You don't need to apologise. I'm sorry we haven't been more helpful.

Unfortunately this response hasn't helped to clarify too much for me though.

I'm just trying to work out what's happening, and what you need help with currently. Am I correct in that you have decided IOS issues are preventing you from following the fixed scroller approach, you're no longer attempting this and you don't need help anymore?

This is your desired approach and is working

See the Pen yLqwXBp by iDad5 (@iDad5) on CodePen



And any/all demos you attempted to pin in a fixed window are broken and abandoned?

Link to comment
Share on other sites

Just a little note that a lot of stuff in this thread is why smooth scrolling exists.

 

Quote

what you're describing sounds like a consequence of the fact that modern browsers handle scrolling on a totally different thread than the main JS one, thus they're not synchronized. So you scroll, the browser moves the contents of the scroller (in the scrolling thread), renders that, and then a few milliseconds later it executes the JS thread and ScrollTrigger applies its transform adjustment and puts things where they're supposed to be. So the content renders at one position and then almost instantly it gets corrected. There's absolutely nothing ScrollTrigger can do (at least that I've found) to force those to stay synchronized. It's totally annoying. That's why ScrollTrigger uses pinType: "fixed" for things in the main scroller (body/documentElement), and "transform" for everything else. Browsers typically only use a different thread for the main/root element scrolling. And you can't use position: fixed


Try this on for size - using ScrollSmoother


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

  • Like 1
Link to comment
Share on other sites

2 hours ago, Cassie said:

And any/all demos you attempted to pin in a fixed window are broken and abandoned?

 

Essentially, yes.

 

Moreover, I had always found a “solution” that worked smoothly with fixed transitions.  But for completely incomprehensible reasons' version A / B—one/tow whatever broke down again at the slightest change of nothing at all.

 

If you ever feel so happy that you want something to get you back down to earth, try reading this thread and the one preceding it.  Word for word—with a great glass of Tuscan wine or—even better—an old Scottish or Japanese single malt if you like those (I'll send you a big sample—I do mean it!) and cry with me. :-)

 

I'm utterly lost for now, have to let one of my most valued customers down, and don't understand why—A and B—you know it.

I will follow your advice of layering another complexity  (ScrollSmoother) on top of a thing that is too complex for me to understand—against every principle I've made my own n in over half a century on this planet. 

 

Tomorrow.

 

Link to comment
Share on other sites

3 hours ago, Cassie said:

This is your desired approach and is working

 

I thought so, but once I reduced it (mostly taking out the Typescript structure that I find much better to understand, but you don't) it turned around on me. 

While I had the 'main problem' not even touched. (If that sound delusional to you, don't feel bad, it sounds the same to me…)

Link to comment
Share on other sites

Without any more melodrama: 

 

I had prepared a stripped down but proven version of my project locally.

 

Jack helped me resolve the issue of not being able to go back to the previously shown panel after my custom refresh/kill-recreation.

 

I found that my way of creating the ScrollTrigger for over a year (version a) was no longer working on iOS/iPadOS (the middle finger emoji for Apple here)

 

I found a solution for Apple's f… up—with version B. Or, so I thought. 

 

When I applied version B to my simplified project version, the previously perfect solution from Jack did not work (and the 3.11.4 version also) did nothing.

 

 Guessing that it must have been my fault with version A/B I simplified… —with the well-known consequences. 

Link to comment
Share on other sites

Quote

If you ever feel so happy that you want something to get you back down to earth, try reading this thread and the one preceding it.  Word for word—with a great glass of Tuscan wine or—even better—an old Scottish or Japanese single malt if you like those (I'll send you a big sample—I do mean it!) and cry with me. :-)

This is what I've been doing. I've spent at least three hours today reading through the demos and the threads trying to work out what's happening. 🙈 

I know you must be frustrated but honestly, this moment right here...This is PERFECT. This is exactly what we want. If something is fixed and then you add code in and it breaks, there's a *moment* when it breaks, and a bit of code that breaks it.

Quote

I take things apart, fix them isolated, but when I put them back together things break again—in another way. 

We're trying to find that bit of code, and in order to do that we need to know the specifics. At the moment the specifics are unclear


I know you probably feel like you've explained this many times over and I'm sorry about that. But phrases like 'it turned around on me' and 'things break again in another way' aren't hugely productive. What is 'it'? What is 'broken'?

What we need is absolutes. Facts. Reduced test cases


e.g

I am trying to do x y and z

This demo works - it does x y and z 
--link--

I added this code
-- snippet ---

Now the demo only does x and y and no longer does z
-- link to demo --

That we can test! 

If you have multiple demos and multiple different bugs, maybe it's table time? Something like this (I don't know what your exact criteria are so please don't take this too literally)

Demo Snapping works Jitters on mobile Version
link yes no 3.11.4
link no yes 3.11.5
link yes yes 3.10.0


I'm sorry if you think this is annoyingly reductive but reductive is incredibly good for bug fixing 😬

  • Like 2
Link to comment
Share on other sites

Here is my try at pure facts and a table:

 

The 'body' vs. 'window' Version showed that the Type:'transform' was unusable on iOS because it always jittered too much.

 

'Panels in Body' however did not snap to the last panel on iOS. 

 

'Panels in Body II' changed the method of giving scroll-space to the ScrollTrigger from pinSpacing:false to pinSpacing:true. (What I called method a and method B )

 

'Panels in Body II' did snap (to the last panel) on iOS.  

 

This could have been the solution, but when trying to integrate 'Panels in Body II' into the project, other things stopped working. So, I went back to test for other ways to solve the 'not snapping to the last panel on iOS'

 

I reduced the code from the Panels in Body demos by removing the Panels class and reducing the PanelManager to the bare minimum of functions.

I tried not to make changes that would affect the scrollTrigger.

 

'Panels PinSpacing true' is the reduced Version of 'Panels in Body II', 'Panels PinSpacing false' is the reduced Version of  'Panels in Body'

 

Both reduced versions did not snap at the last Panel.

 

When I remove the configuration to not refresh on resize, 'Panels PinSpacing false' snaps, while Panels 'PinSpacing true' does not. (Ia added those versions too with the addition of 'no config to' the name.)

 

Table:

 

*iDad scratches his gray head* how do I insert a table here?

                                                                                                                                                                                                                                                

Link to comment
Share on other sites

Quote

I asked for a way to test with version 3.11.5 on CodePen a while ago

Are you asking how to use them on codepen? 


image.png

If so, just the same as usual, nothing special - just pop the links in the settings panel, just like your other demos in this thread!

Or are you asking about local testing? These links should be whitelisted for localhost too, but I can DM you the whole beta files zip with  umd/esm/tgz options if you've got specific needs that these minified files don't meet?

  • Like 1
Link to comment
Share on other sites

Thanks, I probably should have tried it the way you showed before asking dumb questions…

 

Jack sent my a link to the ScrollTrigger Beta only, so I can use this in my local environment, but a whole zip would likely be very helpful, to reduce the small risk that ScrollTrigger 3.11.5 has an issue with gsap 3.11.4.

Link to comment
Share on other sites

Sent! - Also it would be really helpful if you could add the latest, updated versions of the demos you're talking about.

BODY

WINDOW

PANELS IN BODY II

 

(are these all of them?)

 

e.g.  Your version of WINDOW still has the panels.legnth typo.

See the Pen zYLeYev?editors=0010 by iDad5 (@iDad5) on CodePen

 

Which I simplified down and fixed here

See the Pen vYaPovR?editors=1011 by GreenSock (@GreenSock) on CodePen



Which ones are we testing?

Let's make sure that we're on the same page and any demos we're testing are typo free and the correct iteration.

Link to comment
Share on other sites

32 minutes ago, Cassie said:

Your version of WINDOW still has the panels.legnth typo.

Yes, sorry I'm dyslexic—will fix, but as I said I abandoned the window version a while ago because of pinType transform.

 

When I edit it, I cannot find it anymore . Could It be that you have a cached version?

Link to comment
Share on other sites

Right. Of which the jittering on IOS is one of the areas we're attempting to provide advice for.

i.e.

 

Window demo is broken on desktop, showing a white bar when scrolling and additionally jitters on IOS rendering it unusable.


See the Pen zYLeYev?editors=0010 by iDad5 (@iDad5) on CodePen



Solution
Fix typo giving undefined end point and use ScrollSmoother in order to avoids issues caused by browser multi-threading.


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

Link to comment
Share on other sites

1 hour ago, Cassie said:

Of which the jittering on IOS is one of the areas we're attempting to provide advice for.

Thank you for that.

 

But I don't understand exactly what you want to tell me with that post. There is no longer a typo in my window demo, and I cannot remember that the window demo ever made trouble on desktop. The typo after all only means that 'undefined' would be logged.

Does your coming back to the window demo mean that you want me to return to this route?

Or is meant as general advice for anyone having trouble wit iOS jitters? 

Or is it meant as an example of how to better report on issues? 

Link to comment
Share on other sites

There is currently a typo on line 56. All I was doing was pointing that out so that we can fix it and move forward in the debugging process.  Currently your window demo is broken on desktop too for me.

I'm just trying to get us on the same page here. 

 

Quote

The typo after all only means that 'undefined' would be logged.

The typo means the end value of the ScrollTrigger is undefined
 

Quote

Does your coming back to the window demo mean that you want me to return to this route?

I don't really mind what route you go down. That's up to you. I'm just trying to drill down on each demo to work out the issues so that I can ascertain whether WE have to fix a bug or whether the bug is in your code. Secondly, to provide options and advice for you.


But never mind all of this. Let's ignore the window version entirely. 

 

Next steps.

 

1) The demos in your spreadsheet are using the 3.11.4 version. Please swop all of them out to the latest beta version so we can check whether any of the issues are version dependant.

2) Can you outline your ideal behaviour in the spreadsheet? Right now you're adding in details about the CODE. We don't need that. We can see that by looking at the code.

What we need to know is what your ideal behaviour is and whether the demos are working or not, according to that behaviour.

Please don't create a spreadsheet that's just a convoluted version of the code that already exists. We don't need a brand new demo for every value you change.


Are we just aiming for 'snaps to last panel on IOS? Do you want the demos to allow for refresh on resize? What's the goal here?

e.g

Demo Snapping works Jitters on mobile Version
IDEAL YES NO 3.11.5
link no yes 3.11.5
link yes yes 3.10.0

 

  • Like 1
Link to comment
Share on other sites

4 minutes ago, Cassie said:

The typo means the end value of the ScrollTrigger is undefined

Sorry, I was hunting for the console.log line you commented in your version. My bad. 

6 minutes ago, Cassie said:

But never mind all of this. Let's ignore the window version entirely. 

I'm fine with that.

 

To answer your questions:

My ideal behavior would be indeed snapping to the last panel in iOS. Even more ideal would be if no internal event loop happened when is snaps to the last label, but I can live/deal with that.

 

I would prefer if refresh on resize could be disabled, as in the final version I have/need my own resize handling. But it is not a must-have as far as I can see.

 

New finding:

 

By comparing the compiled HTML code, I found a difference between the 'Panels in Body II' and 'Panels PinSpacing true' that I wasn't aware of and that made the difference I was hunting for. The first set the body height to 100vh, the latter to 100% (HTML height 10% at both).

 

With that change Panels PinSpacing true is snapping to the last panel on iOS. I added that change to the table (before your message with a new pen—sorry)

 

I will now change all pens to the 3.11.5 versions.

 

  • Like 1
Link to comment
Share on other sites

Ok so  your ideal behaviour is

Snaps to last panel on iOS - true

Allows refresh on resize - No

 

According to your spreadsheet you have two demos that accomplish this already? What am I missing here?
 

CodePen Link CodePen Debug Link CodePen Code CodePen Title Code Format Allows refresh() on resize PinSpacing body height CSS Snaps to last Panel on iOS
  https://cdpn.io/pen/debug/KKBJKrE KKBJKrE Panels in Body long NO FALSE 100vh NO
  https://cdpn.io/pen/debug/ZEjPeMQ ZEjPeMQ Panels PinSpacing false reduced NO FALSE 100% NO
  https://cdpn.io/pen/debug/RwBOMMW RwBOMMW Panels PinSpacing false no config reduced YES FALSE 100% YES
  https://cdpn.io/pen/debug/yLqwXBp yLqwXBp Panels in Body II long NO TRUE 100vh YES
  https://cdpn.io/pen/debug/mdjgzrG mdjgzrG Panels PinSpacing true 100vh reduced NO TRUE 100vh YES
  https://cdpn.io/pen/debug/OJwqjQB OJwqjQB Panels PinSpacing true reduced NO TRUE 100% NO
  https://cdpn.io/pen/debug/LYBvdeK LYBvdeK Panels PinSpacing true no config reduced YES TRUE 100% NO
Link to comment
Share on other sites

51 minutes ago, Cassie said:

According to your spreadsheet you have two demos that accomplish this already? What am I missing here?

 

That's the reason for all my tedious descriptions:

 

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. It did work with 'Panels in Body' though - which did not work on iOS.

 

The scrollTrigger.scroll(toPosition) is vital to work, as it allows me after a rebuild (due to refresh) to go to the correct position before the resize.

 

As the whole problem started with a malfunction of this part, which jack fixed in the beta. I decided to go back, trying to understand what really causes the 'not sticking on last panel in iOS' issue. It seemed the easier issue to solve at the time. 

 

Especially, it is one that can be reproduced in a smaller demo.

 

By now, I still don't really understand why the 4 demos that do not work on iOS do not work, but I do understand some more.

 

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.

 

The system that powers it is very complex, but the panel-mechanism we are looking at is the core of it.

 

When I made small changes to the code for the demo, I did not understand the outcome. 

 

I do not want to rebuild the whole system around a core component that behaves in a way I don't understand. (Reassembling the system with the updated core, testing it, and deploying it to the site means hours of work each time.)

I had a page that was working for over a year and that stopped working, and I did not understand why for quite a while.

 

A lot is on the line for me in this situation, and I feel the need to really understand what is happening and why, and I need to be confident that the solution I find will work. 

 

EDIT:
I also continued the thread, as I do feel that there are things in ScrollTrigger that do not work as expected, and that I can help to point out so that they can be fixed.

 

Edited by iDad5
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...