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();
});