[How to rotate a element while dragging?]

@ZachSaucier Thanks a lot .Exactly what i was looking for.  BTW been following your tutorials on youtube and gsap/learning center,  It was really super easy to understand and helped us a lot in getting into gsap, Thanks again! & Have a nice day.

[How to rotate a element while dragging?]

Hi Guys, can  anyone please share how to rotate an element(card UI) while dragging? which is some what similar to tinder ui, when you drag element(Card), I want to rotate maximum +15deg(if dragged right side), -15deg(if dragged left side) and animate  second element just like tinder(which is positioned below current element) . I have used Draggable plugin for dragging (which works amazing , Thanks GSAP Team), but dont know how to rotate while dragging like tinder.

 

Let me know if my description is not clear, i will try to clarify or comeup with codepen.

 

Thanks in advance.

[Drag and Drop]

13 hours ago, OSUblake said:

Actually, just use relative values. I was thinking of something different in my previous post.

 

TweenLite.to(this.target, 0.2, {
  x: "+=" + (dropBound.x - dragBound.x),
  y: "+=" + (dropBound.y - dragBound.y)
})

 

It worked. but could not understand exactly what   += does .but  before i had same without += that didnt work. Thanks a lot for your time @OSUblake 

[Drag and Drop]

13 hours ago, OSUblake said:

It's not hard, and I have plenty of demos that do this (search around this forum or my pens on CodePen), but I don't have the time to work your problems out for you. This is very similar to the demos I made in this thread.

 

 

 

 

Thanks Again @OSUblake .I will  look into it.

[Drag and Drop]

49 minutes ago, ZachSaucier said:

Right, I suppose I should make my pseudo code not look like real code  

?for a second, i kinda thought that code would work(even though i knew props readable only). if i had not read MDN docs before i would have believed.My bad

[Drag and Drop]

@OSUblake. Thank you so much for your response. 

Drag elements  are not positioned absolutely.because user can add n number of draggable (think of it like a template user will create).

please check attached codepen 

 

[Drag and Drop]

@ZachSaucier. Thanks you so much for your kind response and its our pleasure .

There is some issues with the implementation maybe i will come with codepen example .

Thanks again!!

[Drag and Drop]

Hi Guys,

 

I am trying to create drag and drop using drag-gable and hittest method.i stuck trying to achieve below task 

* I want to place my drag-gable(represented in blue in the image) to position, scale(achieved by setting width and height of drop-area) and fit inside the drop-area 

but i am not able to get position of droparea correctly to position my drag-gable .i tried draggable.updated() method which just sticks drag-gable to user onDragEnd event .

Please let me know,how can i achieve desired result.

Thanks in advance.

 

 

 

See the Pen LYYPxEZ?editors=0011 by sudhakarselva (@sudhakarselva) on CodePen