Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
ochalmers

Draggable and saving the position

Recommended Posts

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

Link to post
Share on other sites

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

 

Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

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

  • Like 2
Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×