Scrolltrigger on mobile is jerky

[jored]

Hello guys,

 

I am currently creating a scroll-triggered animation on desktop, and I have no issues. However, it is stuttering on mobile. Do you have any ideas? 

Thanks you

See the Pen jOXgyjX by jordan-morand (@jordan-morand) on CodePen

[GreenSock]

Have you tried any of these?: 

1. ScrollTrigger.config({ ignoreMobileResize: true });
2. ScrollTrigger.normalizeScroll(true);

 

[jored]

I solved like that but I am not sure that it is the best practice if someone has a better idea:

 

Quote

  gsap.registerPlugin(ScrollTrigger);
  let tl = null;
  let mm = gsap.matchMedia();
  mm.add("(min-width: 768px)", () => {
    tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".scene",
        start: "top 3%",
        end: "bottom -100%",
        scrub: 1.5,
        pin: true
      },
    });
  });
  mm.add("(max-width: 768px)", () => {
    tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".scene",
        start: "top 3%",
        end: "+=1000",
        scrub: 1,
        pin: '.viewer',
        toggleActions: "play none none reverse",
      },
    });   
  });

 

[Rodrigo]

Hi,

 

That looks good to me. Without knowing the rest of your code, I don't think there's really any upside in creating a variable for the timeline, unless you need that reference later in your code.

 

Happy Tweening!

[Farhannn]

@joredwhere did u put the scroll trigger config code

[jored]

@Farhannn in my first post, the codepen is updated.

You can look, the code is OK.