Jump to content
Search Community

Release Draggable div into another parent mess with animation

Snape test
Moderator Tag

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,

 

I have options with gray border and selected with gray background: 

<div class="options">
 	<div class="item">Criancas</div>
 	<div class="item">Bebes</div>
 	<div class="item">Brinquedos</div>
</div>
<div class="selected">
</div>

 

On javascript part all of items are Draggable. And have the function onRelease that checks if the item "hit" the "selected" div.

 

All works fine, but the final animation. When I Drag the item is ok, but when i release it, the animation to go "back" to the x:0 and y:0 of the new parent starts from the another side of screen.

 

rv_animation.gif.bfc08854dde1db69c8f7f3f2eedd64d5.gif

 

When the item change parent they get new x and y and the release animation starts from that new coordinates.

 

How can i make the release animation starts from the actual coordinates relative to the new parent and avoid this bump?

 

Thks

 

 

Link to comment
Share on other sites

Hi @Snape,

 

Welcome to the forums.

 

It's pretty tough to troubleshoot with just a few pasted lines of code and a screengrab. Do you think you could put that into a demo for us? More info:

That'll give you the best chance of someone being able to help you. Thanks and happy tweening.

 

  • Like 1
Link to comment
Share on other sites

3 minutes ago, GreenSock said:

It's probably easiest to just use getBoundingClientRect() to just figure out the change and adjust for it, like this: 

 

 

 

Is that the result you wanted? 

 

That is it!!! On the spot!

 

Thanks for your patience and your time!

 

 

  • Like 1
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.
×
×
  • Create New...