Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

shaunhurley's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. @Sahil many thanks! Just what I needed, super appreciated! And yes, that is old draggable, I started from an old test pen when I was troubleshooting this, then didn’t update it coz I wasn’t using Draggable in his context. thanks again!
  2. Folks, While this is not directly related to GSAP, I'm working within that framework but have removed the Draggable config for clarity. You guys are the most clued in crowd I've found in relation to this kind of stuff so thought I'd see if anyone has any thoughts. In the code pen above I've got two divs containing a simple SVG. One of the div/svg combos is created manually, the second is created programmatically. The manual div/svg renders exactly as expected, while the text element of the second does not. Using the element inspector in Chrome, the elements appear identical (except for the names) however looking at the computed styles seems to show attributes missing from the generated SVG. If you use the Chrome inspector to copy the text element from the first div into the second, it will show correctly while the second original still does not. Would hugely appreciate any insights! Shaun Hurley
  3. @Jack thanks for that, def looks cleaner with the deltaX, particularly since in my actual environment I have potentially dozens of elements to operate on - not having to use a flag is definitely going to help. The codebase I'm working on is currently using top/left instead of x/y, so while its on the list of todos I'll probably have to suck up the performance hit in the short term, but I'm already in the process of abstracting absolute coordiates so hopefully can incorporate with that. Thanks for your help! Shaun
  4. Partially answered one of my questions below based on some of code from a previous scaling/dragging question
  5. Hi Folks, In the attached pen I have a draggable element. Crossing a boundary (arbitrary left position of 300) the element is rotated 90 degrees. This all work correctly, however I have a couple of questions relating to the implementation and hoping someone might have some thoughts. 1) The element rotation is currently around transformOrigin "center center". If the drag is started with the mouse cursor off-center on the element, then after the rotation the element is separated from the mouse cursor. A preferred behaviour would probably be to move the element's center to the mouse position at the instant of rotation, or possibly translate the mouseposition into the transformOrigin. Is there an efficient way to achieve this that I've missed? Can I do a one time tween on the element to the mouse position that will not interfere with the active drag, or something similar? Do I have to revert to a "mouse follow" versus using draggable? 2) In this example I'm assigning the rotation on every on-drag iteration, which presumably isn't super efficient. Is there an optimal way to achieve this e.g. assigning an "isRotated" property to the item and checking that property before applying the rotation on each drag tick? Would the computation for that flag check (retrieve flag, test, assign if nescessary) be inherently more or less efficient that just assigning the rotation every drag tick? Many thanks as always! Shaun
  6. Thanks @OSUblake, blindingly obvious once it's pointed out, many thanks!
  7. Hi Folks, I think I'm missing something super simple, but I can't find it. In the vanilla demo hit test example an element from a "droppables" collection is used as a jQuery selector, and a "highlight" class is added tot hat element while the hit state is true and removed when it is false. The effect is that the element *underneath* the dragged element is highlighted. I want to invert that effect, and have the item that is being *dragged* highlighted if it is dragged over a droppable element. I expected to be able to do this fairly easily by changing the $(droppables[i]).addClass("highlight"); for $(this.target).addClass("highlight"); however this doesn't work. I've included a fork of the GSAP hit test demo as a codepen, and I've also added a couple of console log statements that show that the element being dragged is being assigned the additional "highight" class, but the visual effect isn't seen. Many thanks Shaun
  8. @OSUblake Thank you for this excellent explanation! It was indeed a case of how our code is laid out, although we are using the <var draggable = new ...> approach, I had a mental disconnect thinking of the callback scope in terms of what was available at the time the callback was being *invoked* versus what was available at the time it was being *constructed*. Total newb mistake. While superficially familiar with bound functions, I certainly hadn't extrapolated to using them in this context - planning to experiment and can definitely see how it will provide a much cleaner solution. In the meantime I had implemented a very ugly workaround using an inline function definition so I could progress: Many thanks for the detailed and extremely clear explanation!
  9. All, In the Draggable docs at https://greensock.com/docs/Utilities/Draggable there is reference under the "onThrowComplete" property to a "onThrowCompleteScope" that can change the scope of what is being passed to the onThrowComplete function. "By default, the scope of the onThrowComplete is the Draggable instance itself, but you may define an onThrowCompleteScope if you prefer, just like any other TweenLite or TweenMax." Presumably this can be used in the same fashion as the TweenLite/Max onCompleteScope, onStartScope, onUpdateScope, etc. settings. Maybe I'm missing the obvious, but I cannot for the life of me find any documentation or examples of using this mechanism - apart from passing it an empty object as '{}' - anywhere, including the TweenLite / TweenMax documentation, and would greatly appreciate a simple example of what the format for defining a scope to be passed to one of these functions looks like. Any suggestions or a pointer to any documentation I've missed would be hugely appreciated. Specifically, I want the onThrowComplete "this" context to refer to the target element, rather than the default draggable instance. I know I can get the target from within the draggable instance, hoewever I'm to have a single onUpdate function which I would also be calling directly based on other (non-draggable) actions. Many thanks!
  10. Thanks @OSUblake, you are absolutely correct, that is exactly what I ended up doing. I found (and had a brief look at MutationObservers, but ended up constructing them individually. Basically I was working within the constraints of some existing code, and being lazy Appreciate the respone!
  11. Hi Folks, Am trying to determine if there is any way to use Draggable in conjunction with jQuery's .on() method, or to achieve a similar result, such that any dynamically created element of a given class under a parent object will inherit the Draggable configuration. jQuery doc -> http://api.jquery.com/on/ I saw a previous conversation thread that referenced an add-in called waitUntilExists which has this approximate effect, but only for a single names element at a time(plus looks like it may no longer work since jQuery 3...) Any thoughts would be appreciated!
  12. Turns out his is fairly trivial :$ with the correct use of the .startDrag() call. Thanks all!
  13. Hi Mikel, Thanks, that codepen is illustrating similar functionality to what I have already achieved i.e. creates a clone which is then draggable. Unfortunately it doesn't help with the automatically moving focus to the cloned object though. I've added a codepen of my current state to illustrate my question a little better. Thanks! Shaun
  14. Hey folks, I inherited some code, which introduced me to GSAP, and I've rapidly become a fan. While trying to implement some mods, I've run into a circumstance I can't find in the docs, so hoping someone here may have some thoughts. Starting point is a "template" <div/> which is static (no GSAP magic). On the mousedown() event for the template I clone a new instance of the div, and make it Draggable. (Note: because I have cloned it without changing offset it is in the same location but "in front" of the original div - color changes to indicate clone) This all works well, however I have to release the original mousedown (take my finger off the button), and then click-and-hold the mouse again in order to initiate a throw of the new object. In a perfect world, I would be able to "transfer" the focus/mousedown state to the newly created draggable div and immediately initiate the throw without releasing the mouse button and clicking again. I've tried passing the .focus() and triggering another .mousedown() but that doesn't appear to work. Not sure if there is a different event I should be firing or somethign else entirely... Any thoughts greatfully appreciated! Thanks, Shaun