xoxoxoxo Posted November 13, 2020 Share Posted November 13, 2020 An issue I came across on mobile especially on iOS where the end value jumps because the mobile browser UI resizes. This behavior happens when I define an explicit end prop such as: ScrollTrigger.create({ trigger: '.panel', pin: true, start: 'top top', end: '+=100%', pinSpacing: false, markers: true, }); Here's a video recording: link This behavior doesn't happen when I remove the end prop. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 13, 2020 Share Posted November 13, 2020 Hey nullhook. This is bound to happen given the viewport's size changed and your element seems to be sized based on the viewport. What are you seeking help with? If you're seeking code help, please include a minimal demo of your issue. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 14, 2020 Author Share Posted November 14, 2020 If you notice in the video there's a slight delay on the end position, Is this because the change is synced with rAF or something? The delay in the end position yields in an odd behavior on mobile because I have images inside the div which are meant to be centered and when the end position changes, it looks like the image is "stuck" and can't fully each the top edge of the browser. Creating a codepen for this issue makes no sense because it renders in an iframe. Im attaching an html/css file perhaps you can run it locally and test it on mobile. Here's another demo scroll-bug-demo.zip Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 14, 2020 Author Share Posted November 14, 2020 Of course this issue can be solved by removing the end prop because my div height is always consistent. What if the end prop is '+=300%' or a static value? The issue persists. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 14, 2020 Share Posted November 14, 2020 12 hours ago, nullhook said: there's a slight delay on the end position, Is this because the change is synced with rAF or something? ScrollTrigger has its own refresh event which fires after resizing and some delay because it is wasteful and bad for performance to try and set things up every single resize event. 12 hours ago, nullhook said: Creating a codepen for this issue makes no sense because it renders in an iframe. That's exactly what the debug view of CodePen is for I still am not sure what you're seeking help with as everything is working as it's intended to. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 14, 2020 Author Share Posted November 14, 2020 Have you looked at the latest demo video? Do you see how the image gets stuck half way through because the refresh event has a delay. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 14, 2020 Share Posted November 14, 2020 You're welcome to call ScrollTrigger.refresh() whenever you need to. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 14, 2020 Author Share Posted November 14, 2020 Is it possible to change the delay on resize event so it refreshes faster? If not, is it possible to completely disable refresh on resize which Scrolltrigger ships with and add your own event instead? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 14, 2020 Share Posted November 14, 2020 No and no (edit, Jack shows there is below). But there's no point in removing the default functionality - just call .refresh() when you need to. Link to comment Share on other sites More sharing options...
GreenSock Posted November 15, 2020 Share Posted November 15, 2020 18 hours ago, nullhook said: If not, is it possible to completely disable refresh on resize which Scrolltrigger ships with and add your own event instead? Actually, yes, try this: ScrollTrigger.config({ // a comma-delimited list of events that trigger a refresh. // default: "visibilitychange,DOMContentLoaded,load,resize" // so you could remove the "resize" one: autoRefreshEvents: "visibilitychange,DOMContentLoaded,load" }); I'd recommend being careful about triggering a refresh() too often (like on every resize event) because it's an expensive operation and could bog things down. 1 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 15, 2020 Author Share Posted November 15, 2020 Thanks! Will try this tonight. Would be great to change throttle time as well. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 16, 2020 Author Share Posted November 16, 2020 What's the current delay to fire refresh on resize event or the events listed above? Link to comment Share on other sites More sharing options...
GreenSock Posted November 16, 2020 Share Posted November 16, 2020 11 minutes ago, nullhook said: What's the current delay to fire refresh on resize event or the events listed above? There's no delay on any of them except resize in which case it's 200ms (again, for performance reasons) 1 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 16, 2020 Author Share Posted November 16, 2020 Is there such a delay when you create scroll triggers? Such as `Scrolltrigger.create()`? Link to comment Share on other sites More sharing options...
GreenSock Posted November 16, 2020 Share Posted November 16, 2020 1 hour ago, nullhook said: Is there such a delay when you create scroll triggers? Such as `Scrolltrigger.create()`? Nope Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 18, 2020 Author Share Posted November 18, 2020 How can I ensure if the config has been set to the right options? I can't happen to read Scrolltrigger's config object anywhere. I was also looking under `gsap.plugins` but no luck here. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 18, 2020 Share Posted November 18, 2020 ScrollTrigger's configuration parameters are talked about in the very large table in the ScrollTrigger docs. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 18, 2020 Author Share Posted November 18, 2020 Huh? those aren't the parameters I'm referring to though. I'm referring to the config object that is set with ScrollTrigger.config Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 18, 2020 Share Posted November 18, 2020 Oh. Go to ScrollTrigger.config() in the docs then. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 18, 2020 Author Share Posted November 18, 2020 Let me try to re-phrase my issue. I'm setting the Scrolltrigger's config object with Scrolltrigger.config() specifically autoRefereshEvents and it doesn't seem disable a specific event. I'd like to ensure if the config object is being set properly or at the right time. How can I read the config object? Link to comment Share on other sites More sharing options...
GreenSock Posted November 18, 2020 Share Posted November 18, 2020 3 hours ago, nullhook said: Let me try to re-phrase my issue. I'm setting the Scrolltrigger's config object with Scrolltrigger.config() specifically autoRefereshEvents and it doesn't seem disable a specific event. I'd like to ensure if the config object is being set properly or at the right time. How can I read the config object? You cannot read the config object. It doesn't work like that. When you pass in values, it makes various changes internally at that point. And to be clear, it doesn't "disable a certain event", like it won't keep the browser from dispatching a resize event for example. It simply adjusts how ScrollTrigger itself responds to those events. Are you using the latest version of ScrollTrigger? What makes you think your config() isn't working? 1 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 18, 2020 Author Share Posted November 18, 2020 I have removed the resize event above as you mentioned however on resize my Scrolltriggers still gets refreshed. I'm using gsap's 3.5.1 version via npm. I won't paste every variable declaration here but to get the gist this is how I'm setting the config. if (process.browser) { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.config({ autoRefreshEvents: 'visibilitychange,DOMContentLoaded,load', }); } function Component() { React.useEffect(() => { const st = ScrollTrigger.create({ ... }); return () => st.kill(); }, []); return ... } Link to comment Share on other sites More sharing options...
GreenSock Posted November 18, 2020 Share Posted November 18, 2020 I'm not sure what to tell you, but here's a minimal demo that shows it working: See the Pen af1f6c4150728bc923b3e4be27237199?editors=0010 by GreenSock (@GreenSock) on CodePen Are you saying that when you resize the browser, it console.logs() a refresh every time? 2 Link to comment Share on other sites More sharing options...
xoxoxoxo Posted November 18, 2020 Author Share Posted November 18, 2020 I just tested by adding a console log in my the refresh listener and it does log every time. Prior to the log I tested with markers and on resize my markers adjusted. I hope this isn't a version related issue? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 18, 2020 Share Posted November 18, 2020 16 minutes ago, nullhook said: I hope this isn't a version related issue? I'm guessing it's a setup issue. Can you please create a minimal demo of the issue? 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