Jump to content
GreenSock

Antdev

Help getting pan to work with gsap

Recommended Posts

I have been jumping from one physics library to the next trying to get multitouch dragging working on a multitouch screen with multiple users.

I initially tried HammerJS but that had issues, then I tried InteractJS and that didn't work if you put a finger anywhere on the table then tried to interact with the modals that the users can move around. I am now trying ContactJS which is proving the best of the lot - it is a fork of Hammer.

https://biodiv.github.io/contactjs

 

Anyway my app will have dragging (panning), rotation and  pinch zoom but initially I am just trying to get the panning working with gsap.

 

I have included my codepen. The first time you drag the square it works fine. Subsequent drags are resulting in the square jumping to a position away from the finger. 

 

What appears to be happening is when I subsequently try to move it, it uses the squares original initial position still and offsets against this. Hence the jump? Well that is  my guess.

 

  var x = event.detail.global.deltaX;
  var y = event.detail.global.deltaY;
  
  gsap.set(domElement, {x:x, y:y});
global.deltaX : Number, // traveled distance along the x-axis in px, whole contact duration
global.deltaY : Number, // traveled distance along the y-axis in px, whole contact duration

 

live.deltaX : Number, // traveled distance along the x-axis within the last 100ms in px
live.deltaY : Number, // traveled distance along the y-axis within the last 100ms in px

I tried the following too which stops the jumping on subsequent moves but it moves it way too much and it flies off the screen

 

  var x = event.detail.live.deltaX;
  var y = event.detail.live.deltaY;
  
  gsap.set(domElement, {x:"+=" + x, y:"+=" + y});

I can see after dragging the square to the right it has the following transform

image.png.ae644e1d51be42f5e0783cfe5225822b.png

If I then just drag it a few pixels to the left it jumps back to its original position and offsets a few pixels from this original position to the left.

image.png.57b055188b3f75fb72999c9c09d5f784.png

 

So how does gsap correctly translate the subsequent movements?

 

I really need to get this working asap so any help would be much appreciated.

Thanks

Ant

See the Pen ExQXKLG?editors=0010 by antdev (@antdev) on CodePen

Link to comment
Share on other sites

Hm, I don't see GSAP/Draggable being used in your demo at all. Am I missing something? 

 

If you need some help, we'd be happy to take a peek at a minimal demo that shows the jumping behavior you described. 

 

I bet you're setting the transform values outside of GSAP which is not a good idea. GSAP is highly optimized for performance and part of that involves caching transform-related values, thus if you're directly setting them like element.style.transform = "...", that would bypass GSAP's cached values and then next time you do something with GSAP on that element, the transforms would revert. If you want to flush all cached transforms, you can gsap.set(element, {clearProps: "transform"}). 

Link to comment
Share on other sites

Thanks Jack - apologies I had listed the wrong codepen demo - I have updated it so you can see the issue now.

 

It seems like the first time you drag it, it works correctly. Then if you remove your finger or release mouse then do it again - it jumps. 

 

Link to comment
Share on other sites

I have saved the last x position in a variable and then every time there is a new pan I add this value to the offset. This appears to stop the jumping. Not sure if it is the best solution that gsap offers for this scenario?

 

let lastX = 0;
let lastY = 0;
var pointerListener = new PointerListener(domElement, options);

domElement.addEventListener('pan', function(event){ 
  // transform
  var x = lastX + event.detail.global.deltaX;
  var y = lastY + event.detail.global.deltaY;  
  gsap.set(domElement, {x:x, y:y});
});

domElement.addEventListener('panend', function(event){ 
  lastX = lastX + event.detail.global.deltaX;
  lastY= lastY + event.detail.global.deltaY;   
});



See the Pen KKQqNvX?editors=1011 by antdev (@antdev) on CodePen

Link to comment
Share on other sites

I'm still confused about what you're asking or what the challenge is. How can I see the jumping you described? And why do you think it's related to GSAP? 

 

Also, do you know about Draggable? You could probably replace all that code with a single line: 

Draggable.create("#contact")

See the Pen bGLRvNY?editors=1010 by GreenSock (@GreenSock) on CodePen

 

If you really do need to set the x/y on every movement (and not use Draggable), you could eek out some extra performance by using gsap.quickSetter() but you probably won't notice much of a real-world difference. 

Link to comment
Share on other sites

Thank you for getting back to me Jack

In this codepen you can see the issue as follows:

See the Pen ExQXKLG by antdev (@antdev) on CodePen


Drag the square  to the right hand side 

Let go of your mouse and click away from the square

Drag the square again a short distance.

Instead of the square dragging a short distance it instead jumps back to its initial position and is offset a short distance from there

 

The gsap connection  - I  am moving the square with gsap.

I wanted to know why it was jumping back to the initial position and offsetting from there. Something to do with how it does transforms behind the scenes.

 

I would love to use Draggable but I need rotation and pinch zoom too which gsap doesn't do unfortunately.

 

ContactJS is helping me capture all the touch gestures but I want to use gsap for the movement. I have a full Greensock Membership so was hoping you could help me as you are always reallly helpful in my times of need.

 

Thanks

 

Ant

Link to comment
Share on other sites

18 minutes ago, Antdev said:

The gsap connection  - I  am moving the square with gsap.

I wanted to know why it was jumping back to the initial position and offsetting from there. Something to do with how it does transforms behind the scenes.

It has nothing to do with GSAP - your event.detail.global.deltaX/Y values are incorrect. Looks like you need to add offsets to those, as it sounds like you already discovered. 

 

20 minutes ago, Antdev said:

I have a full Greensock Membership...

I don't see any Club GreenSock membership associated with your account. Am I missing something? 

Link to comment
Share on other sites

Thanks Jack. Yes the delta Values were not the same as the other physics libraries emitted but adding the offset seems to resolve things for  the dragging. I do appreciate these values being wrong are not a gsap issue but I want to use gsap as part of the solution and know you peeps are experts in all things related to this so it was a desperate post to try and move my forward in a moment of need.

Link to comment
Share on other sites

Got it. Cool, so you're all set on the GSAP-related stuff now, right? 

Link to comment
Share on other sites

 

Thanks

Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×