jbonlinea Posted September 28, 2020 Share Posted September 28, 2020 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 More sharing options...
GreenSock Posted September 28, 2020 Share Posted September 28, 2020 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? 1 Link to comment Share on other sites More sharing options...
jbonlinea Posted September 30, 2020 Author Share Posted September 30, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now