Trouble with GSAP Animations on Touch Devices

[Shru]

Hello, I'm new to GSAP and web development. I'm trying to learn GSAP, and I'm facing an issue where animations load when I scroll using my computer mouse, but on my touchscreen phone, it's just blank.Sorry if my code is messy or not optimized. I initially thought it was a phone issue, but after testing in developer tools, I found that when I drag the screen as we do on touch devices, the animations don't work. However, everything works perfectly when I use a mouse to scroll. Any insights on how to make animations work on touch devices?

 

See the Pen xxmBaNe by Shruti-Mohanan (@Shruti-Mohanan) on CodePen

[Rodrigo]

Hi @Shru and welcome to the GSAP forums!

 

Apparently the overflow-x property on the body tag was the culprit. Removing it solves the issue:

See the Pen RwEOWoQ by GreenSock (@GreenSock) on CodePen

 

Here is the debug view so you can check it on your device:

https://cdpn.io/pen/debug/RwEOWoQ

 

In order to prevent the horizontal scroll, give an overflow-x hidden to the parent of the elements that are being animated horizontally to avoid that overflow.

 

Hopefully this helps.

Happy Tweening!

[Shru]

Thank you so much! The animations are also lagging on my phone, do you have a fix for that as well? 

[GSAP Helper]

A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 

I hope this helps!