Chrome navigation disappearing causing animation to reset? ( Android )

[akalex_x]

I've been trying to figure out why this was working fine when I view it on my pc but its not on my phone for a bit now and I just realized that when the navigation bar disappears on my phone is when the issues happen. I realize that when the bar disappears the height changes so I am sure that's related somehow.

I don't really have as much of an issue with the position at which is triggers, but whats weird is how it resets even when I have my toggleActions set to 'play none none none'.

Any ideas on how to fix it? Here is a video for reference from my phone.

See the Pen QWOgBLz by alexkinejara (@alexkinejara) on CodePen

[OSUblake]

Hi akalex,

 

When address bar moves on mobile it does trigger a resize, but before worrying about that you have several issues with your code that you need to fix.

 

1. You should never nest ScrollTrigger's inside a timeline.

 

fifty2imgTL.to($images, {
  
  // bad
  scrollTrigger: {
    trigger: $trigger,
    start: 'top center',
    end: "bottom center",
    invalidateOnRefresh: true,
    scrub: 0
  }
}, 'start');

 

Please check out the most common ScrollTrigger mistakes.

 

2. Your loop should be inside the matchMedia.

 

ScrollTrigger.matchMedia({

  "(min-width: 960px)": function () {
    $els.each(function () {
      ...
    })
  },
});

 

 

[akalex_x]

Hi blake,

 

Thanks for the feedback, I think I understand how nesting a trigger on a timeline with an existing one would cause issues. I went ahead and just created a new tween separate from the timeline ( i believe thats the right terminology? ) for the parallaxing scroll trigger.  I also moved my loop inside the match media, and went ahead and moved the timeline itself inside the match media under "all" ( im not 100% sure if this was required ). Everything seems to be working as intended so I assume this is right, however I am still having the same issue I pointed out on my phone.

I updated the codepen if you want to look into the update.

If its not too much trouble, could you explain how is it that even though I was nesting the trigger it seemed to be working correctly? Was it because the trigger itself was the same element? I never meant to use a different trigger for it, however when I didn't state the trigger again the parallax was way off.

[akalex_x]

As I look into the docs more it seems like the issue comes from invalidateOnRefresh?
 

When the browser navigation hides, it triggers a refresh and resets my animation and triggers again once it passes by the "refreshed" triggers. Turning it off seems to be a quick fix to the issue, but then on desktop I loose a bit of the responsiveness of the site.

 

I could do a function like the "startTrigger()" i already have to disable invalidate on mobile detection maybe? Hopefully there is a better way to fix this.

[GreenSock]

ScrollTrigger will automatically call .refresh() whenever the window resizes. When you scroll on a mobile device like that and it reveals/hides the address bar, that changes the window size, thus it fires that. If you don't .refresh(), that means all the measurements for the start/end values will be stale (using the old window size) and things may trigger at the wrong place. See what I mean? 

 

You can force ScrollTrigger not to refresh() in that case by limiting the events that trigger it: 

ScrollTrigger.config({autoRefreshEvents: "DOMContentLoaded,load"});

See https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

But keep in mind the tradeoff - the measurements may be stale. But if your layout isn't adjusting (like panels that use 100vh for example), you may be just fine. 

[akalex_x]

Got it, this makes much more sense now. Thank you both!

 

I ended up keeping refresh on, and killing the animation on complete. This will only work for animations that you only need to play once, but it works for the purposes of what I was trying to do.

 

In case anyone ends up looking at this thread, I also ended up changing my selectors a bit due to an issue I had with ScrollTrigger.saveStyles(). I was saving all of the styles for the image containers, this was saving both the clipping path and the parallax (transform y) from the desktop specific tween. So whenever the animation completed and I moved from desktop to mobile or vice versa all of the css would reset. I solved it by having 3 different containers for 3 different things, 1 for the parallax that could be reset using saveStyles, 1 for the clipping path, and 1 for the opacity change.

 

I created a copy of the codepen and updated the code here

See the Pen RwjZaeK by alexkinejara (@alexkinejara) on CodePen

I am going to mark Jacks reply as the answer since I think the refresh was the original issue, but huge thanks to Blake as well!

[GreenSock]

Actually, I dug further into this and I didn't originally realize that the animation was completely re-running from the start on each resize. So...

1. You don't need invalidateOnRefresh: true on your ScrollTrigger anyway here - that's ONLY useful if you are using function-based tween values (it doesn't matter if you're using function-based ScrollTrigger stuff like "start"). So it's safe to omit it here. 
2. I fixed this issue in the next release. In the meantime if you did actually need invalidateOnRefresh: true (and again, you don't here), you can just add this to force it to the end of the animation on refresh as long as the scroll position is beyond the start: 

   onRefresh: self => self.progress && self.animation.progress(1),

    

Sorry about any confusion there