Jump to content


Animate n elements with keycode events BUT... separately

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



What I would like to do, is to be able to click on any one of  a number of elements and then move it around with keystrokes.


Somehow the jquery-ui draggable() has this functionality. You click on any element which has been assigned draggable and off you go:


The problem I have at the moment is that once I have assigned an element to listen to an event handler, when I click on it - it never forgets it. So when I now click on another element to assign it instead to listen to keycode events, it moves but along with the first element, which has not dropped the baton!


I am thinking this must be common and necessary functionality in the world of animation which is why I have posted here and hope it~s not too off topic, and that there must be some code that does it, perhaps using jquery off() or deleting some object property...?


Tried to do codepen but could not get keycode events to work. The HTML window was simply appended with the number 6!


If it helps, from a design perspective, my intention is for the user to click to save the positions and sizes of all elements that they have moved around, and then save them locally or on server. Its goinf to be a kind of 'arrange your own furniture' canvas.


So, grateful for any pointers.





Link to comment
Share on other sites

  • Solution

Hi bhakti :)


unfortunately i can't understand what's your problem !


this's a very basic demo : 

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

  • Like 3
Link to comment
Share on other sites

Hi and welcome to the GreeSock forums.


In order to add to Diaco's great sample (nice Diaco!!) you could use jquery to add/remove an "active" class in order to avoid the elements keep triggering the event handlers.

var elements = $(".element");



  var _self = $(this);

  if(!_self.hasClass("active")) {





// if you click elsewhere after


  • Like 3
Link to comment
Share on other sites

Hi bhakti  :)


unfortunately i can't understand what's your problem !


this's a very basic demo : 

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


Your codepen is exactly what I wanted to achieve. Thanks.

I think the code you have used is more succinct than mine. I did find a solution, which I can't get to work in a codepen:  

See the Pen zvYZMz?editors=111 by anon (@anon) on CodePen

. The solution was to unlink any existing keydown event from the page at the beginning of doAnim()

var html_element=$('html');
html_element.off(); // reset

I was previously trying to unlink the event handler that brings either #b1 or #b2 into focus, which of course did not work.

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.