Draggable and saving the position

[ochalmers 28 Likes (Newbie)]

Hi all,

 

I'm currently working on an expanding module box that I want to be able to drag through it's container. I've managed to get most parts working as I want, but the problem i'm running into is with the positioning once you've opened the module then dragged it somewhere else, then open it again. If you see my codepen, you'll see that once you click the open button the box works as it should by centering the module from it's position then sizing it to fit the screen. Once you close it, it then goes back to where it was before which is perfect. What happens next is my issue as you move the box to a new position and click open it works from it's old starting point. Do any of you wizards have a technique as to how i'd save the position it is in once clicked so that every time it would work from it's starting point?

 

Thanks for reading.

See the Pen PNKRXL by olichalmers (@olichalmers) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi ochalmers 

 

pls check this out : 

See the Pen bprjrz by MAW (@MAW) on CodePen

[ochalmers 28 Likes (Newbie)]

Delightful, Diaco. Thanks a lot.

 

I wasn't aware of a clear() function in GSAP. Is this all it's taken to solve this?

 

Kindest regards,

ochalmers

 

[Rodrigo 2,662 Likes (Superhero)]

Hi Oliver,

 

The thing is that in your codepen when you click on the icon the movetl instance is played. When this happens for the first time GSAP gets the starting point for the element and then animates it to the final position given in the timeline. Then when you do that again, GSAP instead of looking for the current element's position, goes to values it recorded the first time (one of many things that contribute to optimization).

 

Diaco's magic trick consist in removing all the instances from the move timeline and populate it again, so every time you click on the icon, it'll use the current position to translate it to the center and then expand it and also He's getting the window size every time, so that makes it responsive. Just another great solution by Diaco.

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/clear/

 

Happy Tweening!!

[ochalmers 28 Likes (Newbie)]

Rodrigo thanks for the excellently explained response. And thanks again Diaco. Awesome work guys.