Jump to content
Search Community

Draggable and saving the position

ochalmers test
Moderator Tag

Go to solution Solved by Diaco,

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




Happy Tweening!!

  • Like 4
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...