Jump to content
GreenSock

xoxoxoxo

Why does the end trigger jump on mobile?

Go to solution Solved by GreenSock,

Recommended Posts

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

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

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

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

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

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

You're welcome to call ScrollTrigger.refresh() whenever you need to.

Link to comment
Share on other sites

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

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

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. 

  • Like 1
Link to comment
Share on other sites

Thanks! Will try this tonight.

 

Would be great to change throttle time as well.

Link to comment
Share on other sites

What's the current delay to fire refresh on resize event or the events listed above?

Link to comment
Share on other sites

 

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)

  • Like 1
Link to comment
Share on other sites

Is there such a delay when you create scroll triggers? Such as `Scrolltrigger.create()`?

Link to comment
Share on other sites

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

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

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

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

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? 

  • Like 1
Link to comment
Share on other sites

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

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

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

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