Jump to content


Draggable Div

Recommended Posts

Hi, I have this code on codepen, When I click on the Year, I'd like to move the active to the center, How can I do that?

See the Pen RQgRwN by sktklaus (@sktklaus) on CodePen

Link to comment
Share on other sites

Thanks for the demo. There isn't anything in Draggable that is going to do that for you.

Since each year is in a draggable container you are probably going to have to


  1. create a clone of the element you click on
  2. place it in the DOM outside of #timeline like on the body
  3. convert the element's coordinates from where it was inside of timeline to where it should be on the body.
    • if the year you clicked on had an x of 400 and #timeline was moved 300px to the left you would have to place it in the body at x:100
  4. figure out the x,y of the center of the window
  5. tween the cloned element to the x,y of the center of the window

This thread here has some demos that show how to clone elements:



Unfortunately this isn't something I can build out as 90% of it is beyond the scope of GSAP's capabilities, but hopefully this gives you an idea of what to try.



  • Like 3
Link to comment
Share on other sites

I don't think I need to duplicate it, looking at this again today, I think my problem is more with math,

I have these numbers:

$('#timeline').width() // 3840 - total width of my div with the years
$('#timeline').position().left // random number - 
$(this).position().left // random number - when click on the year $(.year.year-active)
$(window).width() // 1920 - the size of my screen

var tl = new 
tl.to($('#timeline'), 1, {x: /*I have no idea of what to put here*/ })


It'll slide my timeline, but how to calc it correctly :/

Link to comment
Share on other sites

ah, ok, I misunderstood. I thought you wanted the years to detach and go to the center of the screen (vertical center and horizontal center).

If you just want to move the timeline so that the active year is centered horizontally that should be easier.


your pos.left was throwing an error and it wasn't clear to me how you were setting the left position of each year.


I added some code though which will give you the x position of the timeline. look in the console when you click on a year.

once you figure out where each year is in the timeline you can figure out how far away it is from center.


so lets say:


the middle of screen is at 500px

the year you click on has an x (or left) of 400px (inside of #timeline)

the #timeline is dragged right 400px.


This makes the year you clicked on appear to be at 800px which is 300px to the right of center (500px)

You now have to tween the timeline back -300px so that the year you clicked on is at center.




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.