ScrollTrigger does not support mobile and 'touchmove'?

[bikt]

Hi,

 

strange situation, I wrote some pretty basic code to do animation (code at the bottom) it works perfectly fine on PC when scrolling, but onUpdate() function doesn't ever trigger on mobile, probably because touchmove isn't handled properly?

 

Is it supposed to be that way? No mobile support on newest version?

 

I did some debugging and I see that a function which does all the heavy lifting isn't triggered for mobile events, so I modified ScrollTrigger.js and forced trigger of mobile events, by adding line 2554:

_addListener$1(_win$1, "touchmove", _onScroll$1);

and it started working as expected. But it just doesn't make sense.. How come a library used by thousands lack such support. Seems like I am missing something here pretty hard. Any thoughts?

 

 

Basic code:

        gsap.to(timelineLine, {
            height: '100%',
            duration: 1,
            ease: 'none',
            scrollTrigger: {
                trigger: timelineContainer,
                start: 'top+=50px bottom-=25%',
                end: 'bottom-=200px bottom-=25%',
                scrub: 2.5,
            },
            onUpdate: function() { ... },
        });

 

[bikt]

I found another probably best solution for this problem, which was to add this code to my animation codebase:

        // Fix mobile version
        ScrollTrigger.observe({
            trigger: 'body',
            type: "touch,pointer", // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer")
            onUp: () => { ScrollTrigger.update(); },
        });

 

[GreenSock]

Hm, that sounds pretty weird to me @bikt. It's super difficult to troubleshoot without a minimal demo - can you please provide one? I just created a test with your code and it worked great on my iPhone.

See the Pen LYXVrKJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

(if you see the color of the bar on the right change, that means onUpdate is getting fired properly)

 

You certainly shouldn't need to manually call ScrollTrigger.update() on every scroll event. There must be something else interfering in your project.

 

Minor note: you could simplify this:

// old
start: 'top+=50px bottom-=25%',
end: 'bottom-=200px bottom-=25%',
  
// same (but shorter)
start: '50px 75%',
end: 'bottom-=200px 75%',

 

Once we see a minimal demo (like a CodePen or Stackblitz), I'm sure we'll be able to offer more insight. I'm also curious what version you're using. Obviously I'd recommend using the latest one.