Jump to content
Search Community

Scrolltrigger and mobile navbar

cbravo test
Moderator Tag

Recommended Posts

 

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.

 

 

 

 

  • Thanks 2
Link to comment
Share on other sites

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

 

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

 

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

@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

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
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

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

  • 5 months later...
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. 

  • Like 1
Link to comment
Share on other sites

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

  • 11 months later...
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

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

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

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 :) 

  • Like 1
Link to comment
Share on other sites

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

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

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

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

  • 1 year later...

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

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