Issue with scrolltrigger scrub, snap labelsDirectional on mobile devices

[Tagliavia]

I know i should provide a codepen but is a complex animation.

On Iphone when swiping to scroll, the animation keeps stuttering back and forth instead of going to next label or previous label.

Any insight into the how to debug or examine the issue would be greatly appreciated.

Just signed for Greensock club so probably good time to try the GSDevTools, regarding the dev tools would love to know if there is any guide about how to use it with react.

 

Additional info that might be pertinent: The section where all the timeline animations gets executed is pinned, height is 100vh, not sure if it might be related to the bottom toolbar that safari displays on scroll.

[OSUblake]

Hi Tagliavia!

 

GSDevTools is designed to work with animations, so it might not be that helpful figuring out issues with ScrollTrigger.  Usage in React would be just like you would do without React.

useEffect(() => {

  const tl = gsap.timeline();
  
  ...
  
  GSDevTools.create({ animation: tl });
  
}, []);

 

As far as your scroll trigger issue, it's very hard to advice without seeing a minimal demo. We just need to see the bare minimum needed to recreate the issue.