❮ Previous Next ❯

ScrollTrigger .isTouch Property

  • Learn how to detect touch devices using ScrollTrigger .isTouch and optimize scroll animations for mobile performance.

  • Introduction

    Not all users scroll the same way.

    • Desktop users → mouse wheel / trackpad

    • Mobile users → touch gestures

    GSAP ScrollTrigger provides .isTouch to detect touch-based devices so you can adjust animations for better performance and UX.

  • What is .isTouch?

    .isTouch is a global ScrollTrigger property that tells whether the current device supports touch input.

    Returned Values

    ValueMeaning
    0Non-touch device (desktop)
    1Touch-only device (mobile)
    2Hybrid device (touch + mouse)
Lesson image

Basic Syntax 

if (ScrollTrigger.isTouch) {
  console.log("Touch device detected");
}

Exact Value Check 

console.log(ScrollTrigger.isTouch);

Disable Heavy Animations on Mobile 

if (!ScrollTrigger.isTouch) {
  gsap.to(".box", {
    x: 300,
    scrollTrigger: ".box"
  });
}

Change Animation Behavior for Touch 

gsap.to(".card", {
  y: 100,
  scrollTrigger: {
    trigger: ".card",
    scrub: ScrollTrigger.isTouch ? false : true
  }
});

Reduce Pinning on Mobile 

ScrollTrigger.create({
  trigger: ".section",
  pin: !ScrollTrigger.isTouch,
  end: "+=300"
});
Note:

 Where .isTouch is Commonly Used

Use CaseReason
Disable pinMobile scroll issues
Reduce scrubTouch scrolling is jumpy
Simplify animationPerformance
UX optimizationBetter feel on mobile
❮ Previous Next ❯