Gsap and/or Draggable makes mobile Safari crashing

[Dennyno]

Well... I dont know if it's really draggable the cause, but that's the last thing I added on this page and before it wasn't having any problem actually. 


At the very end ~ 0:29: you can see the page crashing and reloading.

It's actually impossible to replicate the issue on Codepen, as it'd mean replicate the whole page.. I guess it'd be too much useless content to view a single section's problem.

Following an old thread with @OSUblake I did added the CSS attribute will-change to some elements that ... well... "will-change"  with scrolltrigger (😅lol) .. but the issue is still there.

How to replicate the issue:

1) Unlock the page: https://www.whynot.media/unlock, then just to to https://www.whynot.media/su-di-noi/ till the GSAP carousel, then scroll somewhere.

 

This is the code on that page, and below you can see the video that shows the problem.

 

/***su di noi***/
function _funzioni_su_di_noi(){
 if(body_class.contains("pagina-su-di-noi")){
   function img_grid() {
let griglia_ipads = document.querySelector('.contenitore-griglia-ipad');
if(griglia_ipads){
gsap.fromTo(griglia_ipads, {
  scale: 5,
   transformOrigin:"center",
  
}, {
  transformOrigin:"center 60%",
  scale: .3,
  stagger: .5,
  scrollTrigger: {
    trigger: griglia_ipads,
    start: "top 110%",
    end: () => innerHeight * 6,
    scrub: true,
  }
});
gsap.set(".contenuto-ipad:not(.centerBlock)", {autoAlpha: 1})
gsap.to(".contenuto-ipad:not(.centerBlock)", {duration: 0.1, autoAlpha: 1}, 0.001)

// Images to make it look better, not related to the effect
const size = Math.max(innerWidth, innerHeight);
gsap.set('.contenuto-ipad', {backgroundImage: i => `url(//picsum.photos/${size}/${size}?random=${i})`});

const bigImg = new Image;    
bigImg.addEventListener("load", function () {
  gsap.to(".centerPiece .contenuto-ipad", {autoAlpha: 1, duration: 0.5});
});
bigImg.src = `//picsum.photos/${size}/${size}?random=50`;
}
}
img_grid();
/*horiz scroll sections4*/
async function horiz_scroll_sections(){
let snapX,slideDelay=4,slideDuration=.3,slides=document.querySelectorAll(".slide"),prevButton=document.querySelector("#prevButton"),nextButton=document.querySelector("#nextButton"),progressWrap=gsap.utils.wrap(0,1),numSlides=slides.length;gsap.set(slides,{backgroundColor:"random([red, blue, limegreen, dodgerblue, orange, goldenrod, lime, black])",xPercent:a=>100*a});let wrap=gsap.utils.wrap(-100,100*(numSlides-1)),animation=gsap.timeline({repeat:-1});animation.to(slides,{xPercent:"-="+100*numSlides,duration:numSlides,ease:"none",modifiers:{xPercent:wrap}},0),animation.to(".slide span",{rotate:360,ease:"none",stagger:{amount:numSlides-1}},0),animation.pause(),setupDraggable();function setupDraggable(){function a(){f.kill(),this.update()}function b(a){f.kill();let b=snapX(gsap.getProperty(e,"x")+a*-g);f=gsap.to(e,{x:b,duration:slideDuration,onUpdate:c})}
function c(){/*console.log(gsap.getProperty(e,"x")/-h,"wrapped",progressWrap(gsap.getProperty(e,"x")/-h)),*/animation.progress(progressWrap(gsap.getProperty(e,"x")/-h))}function d(){let a=gsap.getProperty(e,"x")/h||0;g=slides[0].offsetWidth,h=g*numSlides,snapX=snapDirectional(g),gsap.set(e,{x:a*h}),b(0),f.progress(1)}let e=document.createElement("div"),f=gsap.to({},{}),g=0,h=0;d();let i=new Draggable(e,{type:"x",trigger:".slides-container",inertia:!0,maxDuration:.75,minDuration:.1,minimumMovement:45,onPress:a,onDrag:c,onThrowUpdate:c,allowContextMenu:!0,allowNativeTouchScrolling:!0,snap:{x:a=>snapX(a,0>i.deltaX?-1:1)}});window.addEventListener("resize",d),document.querySelector("#prevButton").addEventListener("click",()=>b(-1)),document.querySelector("#nextButton").addEventListener("click",()=>b(1))}function snapDirectional(a){let b=gsap.utils.snap(a);return(c,d,e=1e-3)=>{let f=b(c);return!d||Math.abs(f-c)<e||0>f-c==0>d?f:b(0>d?c-a:c+a)}};    
function dx_sx(){let e=document.querySelector(".hero-caption"),t=document.querySelector(".drag-carousel");e.addEventListener("touchstart",(function(n){let a=n.changedTouches[0].pageX;e.addEventListener("touchend",(function(e){let n=e.changedTouches[0].pageX;a<n?(t.classList.remove("mancino"),t.classList.add("destro")):(t.classList.add("mancino"),t.classList.remove("destro"))}),!1)}),!1)}dx_sx();
}
horiz_scroll_sections();     
 }//su di noi
}
_funzioni_su_di_noi();

What can I do?  Thanks

See the Pen oNpzErL by DedaloD (@DedaloD) on CodePen

[OSUblake]

We can't troubleshoot a live site for you. You're going to have to do what I said in your DM to find the problem. You're probably making the browser do too much work and running out of memory or something like that. You can't throw a bunch of HTML/SVG animations at mobile browsers and expect them to behave like it's running on a next gen video game console.