Jump to content
Search Community

Animate element after drag : animation end position relative to element start position

jbonlinea test
Moderator Tag

Recommended Posts

Hi there

 

I kind of knew I'll bump into this issue and after a long search in the forum I haven't found a clean solution yet.

 

I do have two element that are animated using gsap.flip. the animation can be trigged when clicking on the button.

Theses elements may also be dragged, and there are no issue with dragging them, per se.

 

When the elements haven't been dragged, the animation works fine.

However,  once an element has been dragged, it's position after the animation is wrong.

 

Indeed, the animation resize the element, but not to replace it where it would be if it hasn't been dragged before.

 

The workaround I wanted to implement is to first "reset" the element position where it was before is had been dragged, then animate it.

I do know how to define/record an element position with jquery, and send it back there, however it is not animated.

I know I can place it in a flip animation, but I don't need it to go back to it's position before "basic" animation starts.

The idea is the to animate to from where it is after being dragged  to where it would have been if it hasn't been dragged

 

The question is thus double :

 

First, how to animate a element so it get back to the position it was before it was dragged (ever the many in between dragged position do not matter).

 

Second how to animate an element so that it is lead to the same position whether it has been dragged or not.

 

 

The Pen above provide the animation which show the stat/end position of the element , and thy are draggable.

 

Hope I'm understandable

Thank's in advance for your guidance

See the Pen vYGzjeN?editors=0111 by jbonlinea (@jbonlinea) on CodePen

Link to comment
Share on other sites

It's actually behaving exactly as it should. When you drag, you apply transforms to the element (which stay with it). So, for example, if you drag one element 200px down from its normal position in the document flow, and then you alter the class so that it's positioned differently via flexbox, it'll STILL have the transform of 200px down from the natural flow. If you want to clear out those transforms, just use clearProps like this: 

See the Pen 38e53f4da66c134a385f3d74dec6374f?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you want to retain the positioning when you invert the classes/elements, you'd need to do the same to the transforms like this: 

See the Pen 1b3a212d0b777c642a063a39f09d52cc?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In short, it's a logic issue (unless I'm misunderstanding something). 

 

Make sense? 

  • Like 1
Link to comment
Share on other sites

hi,

 

Thank's for your prompt reply !

 

First was aware that dragging an element is exactly like applying a transform that's why I could think of a workaround buy "removing" the applied transform through jquery before running the animation. But...

 

So, yes it totally make sense, in a way, but from an other perspective not so much. let me explain :

It seems it is all about the way gsap.to or gasp.fromTo works. If the destination "to" of the animation is calculated like "take this element and move it 200px left" then the result if different than if the destination "to" is "take this element and place it there".

 

So yes there is a transform after an element has been dragged, but it relate to the actual position so it may affect the animation "from", but not necessarily the "to".

 

In the end, I do understand what you have done, reset props, which is pretty similar, with gsap mindset, to what I had in mind (reset element position with jquery before the animation) , but not really why the animation takes the "from" into account this way while I only specify the "to"

 

 

Again thank's for your support

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...