How do I disable GSAP animations on mobile screen?

[DenyUA]

Hello! I need to disable animations when it's mobile (touch) screen. How can I do this?

[Rodrigo]

Hi @DenyUA and welcome to the GreenSock forums!

 

The best alternative is to use GSAP MatchMedia:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

If you want to target every touch screen (be aware that some laptops and other desktop screens do have touch events), you can use a combination of ScrollTrigger isTouch property:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

 

You can create your GSAP instances in a conditional block in order to create the animations when the property returns the value you're expecting.

 

Hopefully this helps. If you keep having issues, please create a minimal demo that clearly illustrates the problem.

Happy Tweening!

[GreenSock]

8 hours ago, Rodrigo said:

If you want to target every touch screen (be aware that some laptops and other desktop screens do have touch events), you can use a combination of ScrollTrigger isTouch property

Just to clarify, you can sense that directly in a matchMedia() query: 

"(hover: none), (pointer: coarse)"

That indicates it's touch. So you can add that to any media query. Like:

mm.add("(max-width: 720px) and (hover: none) and (pointer: coarse)", () => {...})

But if you're just doing conditional logic, it's totally fine to use ScrollTrigger.isTouch. 

[DenyUA]

Really thank you for your help!