Positioning problem when to is done after draggable..

[jinnyum]

hi,

 

I applied gsap.to after dragging.

I thought it would move to the x value applied to gsap.to.

However, the x result value is the result of adding up to the dragged position value.

 

result : transform: translate(50%, 0%) translate(63px, 0px)

I was expecting transform: translate(50%, 0%) values.

What should I do to get the result I want?

 

See the Pen yLQVKaG?editors=1111 by cgfpythc-the-vuer (@cgfpythc-the-vuer) on CodePen

[Rodrigo]

Hi,

 

The thing is that Draggable is works with the translate3d() function and xPercentage works with the translate() function. The latter works only for horizontal and vertical movement while translate3d() does it in 3D space. Is not really an issue per se, just the fact that in CSS you can actually combine them, which is exactly what GSAP is doing.

 

Maybe this is what you're trying to do?

Draggable.create(".drag", {
  onDragEnd: () => {
    gsap.to(".drag", { x: "500%" });
  }
});

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[jinnyum]

I didn't know that xpercent and x were different. T_T

I also didn't know that a percentage could be applied to x...

 

Actually... there was something I really wanted to do.

1. Divide the area into 5 equal parts
2. Placing divs in the partition
3. Assign each index number to div
4. Drag the div to check if it exceeds half of the area placed
5. If it exceeds half of the area, increase or decrease the index number and change the position to index * 20%
6. Move the div with index number 4 to the left, and when the index number decreases, calculate the position as left:3*20% and place it

 

I think I can reach the goal I want with the method you gave me.

However, I wonder if there is a way to do what I described above with gsap.

 

thank you so much for your answer

[Cassie]

Quote

1. Divide the area into 5 equal parts
2. Placing divs in the partition
3. Assign each index number to div
4. Drag the div to check if it exceeds half of the area placed
5. If it exceeds half of the area, increase or decrease the index number and change the position to index * 20%
6. Move the div with index number 4 to the left, and when the index number decreases, calculate the position as left:3*20% and place it

 

Hiya!

 

This is more in the realm of custom logic/styling, so it's a little beyond the help we can offer here in these free forums.

In terms of the GSAP API though - you can use hitTest to check whether or not the target element overlaps with a particular element. You can also use callbacks to set the position of an element and then update to update draggable when you've finished moving things

Hope this helps!

 

Feel free to pop back if you try to figure it out and get stuck.

[jinnyum]

ok thank you very much~!!!!!!!!!!!!!!