VUE Health

So the solution was to isolate the mobile experience - the desktop/tablet version works as expected as well. This looks like further proof of the effects of invoking .refresh() multiple times due to resize. Thank you @Jack for the help! Code update below for reference: // APPLY INLINE DISPLAY PROPS TO STICKY NAVS gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); var isiBottom=$('#isiBottom'); var isiRight=$('#isiRight'); // SCROLL CONTROLS FOR BOTTOM ISI var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function() { return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); } }; if(isMobile.any()){ gsap.to("#isiBottom", { scrollTrigger: { trigger: "#isiAnchor", scrub: true, start: "top bottom", end: "top bottom", }, display: "none", ease: "none", }); } else { $(window).on('resize', function(){ var win = $(this); //this = window if (win.width() >= 1900) { $(isiBottom).css('display','none'); $(isiRight).css('display','block'); gsap.to("#isiRight", { scrollTrigger: { trigger: "#isiAnchor", scrub: true, start: "top bottom", end: "top bottom", }, display: "none", ease: "none", }); } else { $(isiBottom).css('display','block'); $(isiRight).css('display','none'); gsap.to("#isiBottom", { scrollTrigger: { trigger: "#isiAnchor", scrub: true, start: "top bottom", end: "top bottom", }, display: "none", ease: "none", }); } }); $(window).trigger('resize'); } $('.collapse').on('hidden.bs.collapse', function () { ScrollTrigger.refresh(); }); $('.collapse').on('shown.bs.collapse', function () { ScrollTrigger.refresh(); });

The fix did not work entirely. How would you counter this affect on mobile?

A change in the order of the code appears to have done the trick. ScrollTrigger.refresh may have been called before registration of the plugin. Although, a number of browsers seem to be more forgiving, in this case, Safari on iOS is not. The method calls were moved after registration and behavior appears to be fine. Thank you.

Hello All. The following is plaguing me. I have two scrollTriggers that work based on screen-width. No issues on desktop, but, on iPhone Safari, we are seeing the a side-effect when the user scrolls quickly down and, then, up to the top again. Quoted report below. "It happens both with the menu toggle and with the drawer tab. Sometimes I don’t have to click anything, I just scroll up quick the viewport snaps down lower on the page. It seems as if it’s trying to compensate for positioning on the page and that gets screwed up when you scroll too fast. Maybe something to do with the sticky ISI?" Code below: // APPLY INLINE DISPLAY PROPS TO STICKY NAVS gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); var isiBottom=$('#isiBottom'); var isiRight=$('#isiRight'); $(window).on('resize', function(){ var win = $(this); //this = window if (win.width() >= 1900) { $(isiBottom).css('display','none'); $(isiRight).css('display','block'); } if (win.width() <= 1899) { $(isiBottom).css('display','block'); $(isiRight).css('display','none'); } ScrollTrigger.refresh(); }); // SCROLL CONTROLS FOR BOTTOM ISI var windowWidth=$(window).width(); if(Number(windowWidth)>=1900){ gsap.to("#isiRight", { scrollTrigger: { trigger: "#isiAnchor", scrub: true, start: "top bottom", end: "top bottom", }, display: "none", ease: "none", }); } else { gsap.to("#isiBottom", { scrollTrigger: { trigger: "#isiAnchor", scrub: true, start: "top bottom", end: "top bottom", }, display: "none", ease: "none", }); } $('.collapse').on('hidden.bs.collapse', function () { ScrollTrigger.refresh(); }); $('.collapse').on('shown.bs.collapse', function () { ScrollTrigger.refresh(); });