Jump to content
Search Community

Why does the end trigger jump on mobile?

xoxoxoxo test
Moderator Tag

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

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

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

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

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

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