Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Gajendra SIngh

Tweenmax in mobile

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there, I am getting this error when I am opening this url in mobile and dragging bow to left." Error: <g> attribute transform: Expected number, "matrix(0,0,0,0,NaN,NaN)". Here is codepen url '

See the Pen qrqpJN by pyrografix (@pyrografix) on CodePen

 

  • Like 1

Share this post


Link to post
Share on other sites

I don't have much time at the moment, but my guess is that the problem may be in your mouse/touch handling. It looks like you're only accommodating mouse events, not touch (hence the problem only showing up on mobile). And in your handlers, you're expecting the event to have clientX/clientY properties but touch events are different, thus those would be null. Have you tested to see what values you're passing into the tweens? That'd be my recommendation. 

 

If you want it to work well on mobile, it'd be a good idea to code with touch events in mind (in addition to mouse events of course). 

 

Also, I'd update to the latest version of GSAP (1.20.2 right now). 

  • Like 3

Share this post


Link to post
Share on other sites

What mobile OS are yo seeing this in.. Android or Apple OS?

 

Also what mobile browser and version?

 

By the way pretty cool bow and arrow game :)

  • Like 2

Share this post


Link to post
Share on other sites

You didn't really set it up for touch events. But I know, it's a little confusing and complex. 

 

Touch events are very different, and you've also gotta consider how the various browsers implement them (Android and Apple use TouchEvents, but Microsoft uses PointerEvents). I don't have time to go into all the specifics but I'd recommend Googling about the differences. To make your demo work on iOS or Android for just one touch, you could just put this at the very top of your getMouseSVG() function: 

 

//if it's a touch device, grab the first changed touch event because that's what has the clientX/clientY values
if (e.changedTouches) {
    e = e.changedTouches[0];
}

 

Here's one link you might want to read: https://developers.google.com/web/fundamentals/design-and-ui/input/touch/

 

Again, that code I gave you above isn't intended to be a bulletproof solution for every browser and all multi-touch scenarios - I just wanted to get you going in the right direction :) 

 

Happy tweening!

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×