akapowl Posted August 19, 2020 Share Posted August 19, 2020 Also made a screencast to show how/when the problem occurs. Might be easier to reproduce it when seeing it instead of just reading. I think it is somehow related to how fast you get to a certain position, while the browser-bar re-appears. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted August 20, 2020 Share Posted August 20, 2020 I have an iPhone Xs and I've tried on that, on my iPad, and in multiple browsers on my desktop at least 50-100 times and I cannot get it to break even once. Ugh! I'm curious - does it solve anything if you just add this?: window.addEventListener("resize", () => ScrollTrigger.refresh()); Also, does it only "break" when pinReparent is true? Your video sure makes it look like your browser isn't dispatching scroll events when you go really fast like that. Tough for me to tell since I can't for the life of me get it to break on any device yet Link to comment Share on other sites More sharing options...
akapowl Posted August 20, 2020 Share Posted August 20, 2020 6 hours ago, GreenSock said: Your video sure makes it look like your browser isn't dispatching scroll events when you go really fast like that It also happens on slower swiping, so I think it is more about where Mario/his container is, when the swipe ends. https://www.youtube.com/watch?v=15C4iPdbb1c 6 hours ago, GreenSock said: I'm curious - does it solve anything if you just add this?: window.addEventListener("resize", () => ScrollTrigger.refresh()); Also, does it only "break" when pinReparent is true? In both cases - with just pinReparent set to false; and with the eventListener added and pinReparent set to true - it doesn't seem to appear - couldn't reproduce it in both cases. Link to comment Share on other sites More sharing options...
GreenSock Posted August 20, 2020 Share Posted August 20, 2020 Alright, I think I found something that may have resolved things. Would you mind trying the latest beta? https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) Better? 3 Link to comment Share on other sites More sharing options...
akapowl Posted August 20, 2020 Share Posted August 20, 2020 That stubborn little guy just wont get out of his box - for me (Samsung Internet on Android 10) the issue doesn't appear anymore with that latest beta. Good job @GreenSock!!! 1 Link to comment Share on other sites More sharing options...
cbravo Posted August 20, 2020 Author Share Posted August 20, 2020 Looks like its working in both my iPhoneX safari and Chrome! Good stuff @GreenSock and @akapowl! Hopefully this might have an affect on my original issues in this topic lol! Either way I am glad a solution for this issue was found! 1 Link to comment Share on other sites More sharing options...
akapowl Posted August 20, 2020 Share Posted August 20, 2020 I did not do much of any real work on this, except for providing the test results, but thanks 😋 On the original issue(s): I was thinking, since @cbravo's ScrollTrigger, the animation's values and the elements on his page that they are related to, seem to be very dependend on the viewportheight ( I'm gonna admit, I am still not 100% sure, I am seeing through, what you are doing there ), might it be neccessary to use invalidateOnRefresh and function-based values on the ScrollTrigger to even have a chance of making it work properly on mobile? Because the problem with the red dot not really sticking, but more or less panning in a paralax-manner after a resize, for instance, also happens on resize with a desktop browser. Could this be related and/or a step in the right direction with this? Link to comment Share on other sites More sharing options...
cbravo Posted August 20, 2020 Author Share Posted August 20, 2020 @akapowlI think the crux of my problems are tied to me wanting to animate a fixed position element (The red circle) relative to elements in the normal flow of the document (the target headline). Let me try to explain again and maybe it will help clarify. So in simple terms my code is saying hey red circle when the target headline reaches 80% of the viewport you should be at 80% of the viewport too. All this does is animate the ball so that they both hit 80% of the viewport at the same time. The next part of the animation is the part that sticks with the headline by saying whentarget headline is at 20% you should be too. So in theory they should animate upwards together. I think that because the positioning of the red circle is affected by the mobile nav bar and Conversely, the mobile nav bar does NOT affect the positioning of target headline I think thats where my problem gets introduced. Something like that anyway... simplified pen without motion path: See the Pen XWdNKPb by bravoclicks (@bravoclicks) on CodePen clear as mud? lol 1 Link to comment Share on other sites More sharing options...
Visual-Q Posted August 21, 2020 Share Posted August 21, 2020 It's hard to wrap my head around the exact interaction that occurs when screen height changes but your animation passes off control of the ball from one tween to another at the 80% point correct? I wonder if the progress of the tweens relative to one another is actually being thrown out of sync when the screen height changes. 1 Link to comment Share on other sites More sharing options...
Qonvoy Posted October 15, 2020 Share Posted October 15, 2020 On 8/20/2020 at 7:19 PM, GreenSock said: Alright, I think I found something that may have resolved things. Would you mind trying the latest beta? https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) Better? @GreenSockIs it possible to tryout the beta from a release on NPM? Running into the some issues with the latest stable. Link to comment Share on other sites More sharing options...
GreenSock Posted October 16, 2020 Share Posted October 16, 2020 20 hours ago, Zaljir said: @GreenSockIs it possible to tryout the beta from a release on NPM? Running into the some issues with the latest stable. Hm, the issue this thread was talking about was already fixed. Are you using the latest version? What exactly is the problem you're seeing? You can get the beta of the next release as a .tgz file that you can npm install here: https://assets.codepen.io/16327/gsap-beta.tgz Link to comment Share on other sites More sharing options...
Developers Posted April 3, 2021 Share Posted April 3, 2021 hi all, is there any update regarding this issue? i'm having a terrible time trying to make my animations work on mobile due to the address bar hiding Thanks in advance Link to comment Share on other sites More sharing options...
GreenSock Posted April 4, 2021 Share Posted April 4, 2021 13 hours ago, Developers said: hi all, is there any update regarding this issue? i'm having a terrible time trying to make my animations work on mobile due to the address bar hiding Thanks in advance Would you mind being a bit more specific and maybe provide a minimal demo? ScrollTrigger can't really prevent the address bar from showing, so all it can do is a 'soft' refresh, meaning it waits until the scrolling finishes before firing its refresh(). I can't see any other way of handling it, but I'm certainly open to suggestions. This isn't a "bug" in ScrollTrigger (unless I'm misunderstanding you) - it's a logical impossibility. 1 Link to comment Share on other sites More sharing options...
Developers Posted April 4, 2021 Share Posted April 4, 2021 I will prepare a demo, but for now this is the live site https://lowbudgetlife.gr/ the problem is in the mobile version when the navbar appears the next animation is triggered as if the triggers are repositioned. I am using this script for my transitions: See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen when i run this page on my phone the navbar doesn't appear on scroll. How are they doing this? what i'm trying to work now is having the body with overflow: hidden, then i create a wrapper which will be the new scroller and put all my panels in there. Does that sound like a workaround or i'm wasting my time? I also tried the refresh method on a resize event, with no success. Thanks for your quick reply, i appreciate it since i am under a lot of pressure for this Link to comment Share on other sites More sharing options...
Developers Posted April 4, 2021 Share Posted April 4, 2021 i don't know if i can do this here @GreenSockI but i'm willing to pay a small fee if someone can fix this for me, if this is against the rules please feel free to delete Link to comment Share on other sites More sharing options...
Maniak Development Posted March 23, 2022 Share Posted March 23, 2022 On 8/20/2020 at 11:19 AM, GreenSock said: Alright, I think I found something that may have resolved things. Would you mind trying the latest beta? https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) Better? Hi @GreenSock, thank you for shared that. Do you have some installation steps for business accounts? Link to comment Share on other sites More sharing options...
GreenSock Posted March 23, 2022 Share Posted March 23, 2022 12 minutes ago, BC Development said: Hi @GreenSock, thank you for shared that. Do you have some installation steps for business accounts? First of all, thanks for being a Club GreenSock member! 🙌 There are lots of details about installation options here: https://greensock.com/install Was there something specific you were struggling with? Link to comment Share on other sites More sharing options...
Maniak Development Posted March 23, 2022 Share Posted March 23, 2022 2 minutes ago, GreenSock said: First of all, thanks for being a Club GreenSock member! 🙌 There are lots of details about installation options here: https://greensock.com/install Was there something specific you were struggling with? I want to install the 3.10.0 version of the scrollTrigger plugin that you guys are using in this code pen https://assets.codepen.io/16327/ScrollTrigger.min.js, is there a way that I can get that version? Link to comment Share on other sites More sharing options...
GreenSock Posted March 23, 2022 Share Posted March 23, 2022 Oh, I see. No, we don't distribute beta versions that are in-progress. I'm curious why you wanted to use that version in particular - what prompted your interest? We do hope to launch 3.10.0 within the next 2-3 weeks, FYI. We're working very hard on it. Super exciting features are coming 1 Link to comment Share on other sites More sharing options...
Dennyno Posted March 23, 2022 Share Posted March 23, 2022 It's a long debate about the vh on mobile Ui. Actually the fix is using a flexbox trick which enlarges the child to fit its flex parent, as you can see here: the border fills the entire vh, even with and without the mobile browser Ui behaviour.https://dennysdionigi.github.io/hero-minimal-anim Other fix should be calculating vh with js, as described hero too: https://cloudfour.com/thinks/a-bashful-button-worth-8-million/ Btw it seems that newer CSS vh attributes are coming soon, like lvh (large video height) svh (small video height) avh (auto video height), same for width too. Let's see... Link to comment Share on other sites More sharing options...
Maniak Development Posted March 24, 2022 Share Posted March 24, 2022 On 3/22/2022 at 7:36 PM, GreenSock said: Oh, I see. No, we don't distribute beta versions that are in-progress. I'm curious why you wanted to use that version in particular - what prompted your interest? We do hope to launch 3.10.0 within the next 2-3 weeks, FYI. We're working very hard on it. Super exciting features are coming I'm having the same issue as the OP, the scrollTrigger end and start keeps jumping when the browser navigation hides and I can't find a way to solve the issue Link to comment Share on other sites More sharing options...
GreenSock Posted March 24, 2022 Share Posted March 24, 2022 That jumping isn't a bug. It's not "fixed" in 3.10.0, but there are some nifty goodies that can help you get more of the behavior you may want. You can definitely disable the refresh() that happens on resize by using the .config() method if it's on a mobile device: if (window.matchMedia("(hover: none), (pointer: coarse)").matches) { // notice "resize" is not in the list: ScrollTrigger.config({ autoRefreshEvents: "DOMContentLoaded,load" }); } Link to comment Share on other sites More sharing options...
Maniak Development Posted March 24, 2022 Share Posted March 24, 2022 1 hour ago, GreenSock said: That jumping isn't a bug. It's not "fixed" in 3.10.0, but there are some nifty goodies that can help you get more of the behavior you may want. You can definitely disable the refresh() that happens on resize by using the .config() method if it's on a mobile device: if (window.matchMedia("(hover: none), (pointer: coarse)").matches) { // notice "resize" is not in the list: ScrollTrigger.config({ autoRefreshEvents: "DOMContentLoaded,load" }); } I tried that but I was debugging and when I use the onRefresh function I still have occurrences of refresh Link to comment Share on other sites More sharing options...
GreenSock Posted March 25, 2022 Share Posted March 25, 2022 11 hours ago, BC Development said: I tried that but I was debugging and when I use the onRefresh function I still have occurrences of refresh I didn’t understand your comment. Can you rephrase? Got a minimal demo? Link to comment Share on other sites More sharing options...
Fettahaud Posted March 1 Share Posted March 1 Hey people. First of all, thank you for this helpful discussion Now, after hours of debugging why scroll trigger markers are changing their positions, I discovered the same thing you all found out, which is because of the search bar that is moving. And I'm a bit surprised it's not been fixed for all that time, I mean at least today, we got a new css value like dvh, svh(https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths), I don't know how scroll trigger works under hood, but I really would like to see this fixed Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now