andyr

TweenLite.to(e.target, 2, {"-webkit-filter": "grayscale(1)"}) Should I be using EaselPlugin? Using vendor prefixes I can animate to the CSS filters - https://developer.mozilla.org/en/docs/Web/CSS/filter, but the switch is instant - the duration is ignored.

Yes, Angular. Correct order? Switching node positions with insertBefore?

Thanks OSUblake. Yes, I'll need to get ThrowProps plugin to get getDirection('velocity'). For now I'm doing a simple, last_x vs this.x comparison to determine drag direction, like in the demo. I've been trying various methods to do a draggable photo gallery. The way I was trying to do it above (not touching the DOM and using the transform values to get their positions, then move things around) - won't work responsively. So I either do it: a. Percentage co-ordinate positions based on the bounding box. b. Inserting DOM elements - which your grid demo linked above appears to do. Not sure which is the best method. I was having trouble updating the layout and inserting nodes. Will have to post a CodePen tomorrow.

Looking at this Codepen: http://codepen.io/GreenSock/pen/dPZLEp // Calculate x pos to slide to. Starting at target items' current x position. var x_pos = item.target._gsTransform.x - item.width; console.log(x_pos); // Slide the 'hit' item. TweenMax.to(item.target, 1, {x: x_pos}); I'm dragging a box right. On 50% threshold, the "hit" box slides left. I'm using the hit box's _gsTransform.x - the width of the dragged box to determine the x_pos to slide to. However, the _gsTransform.x getting applied to TweenMax.to isn't the _gsTransform.x of the first hit, but the value when the "hit box" and the dragged box are no longer hitting (the x position where the left edge of the dragged box stops hitting the left sliding box). Which makes sense of course, but... Any way to get that first hit x value? Thanks.

Is there a way to get the x value (the transform value) of the object being hit, through the API?

if(Draggable.hitTest(item, items)) { } items is an array. Is it possible to find out which of items has been hit? Or do I need a for loop?

if (Draggable.hitTest('#test')) { console.log('hit'); } Results in: Uncaught TypeError: Cannot read property 'pageX' of undefined. Object, selector - same result.

cursor: '-webkit-grabbing', // works cursor: '-moz-grabbing', // works cursor: 'grabbing', // doesn't work cursor: '-webkit-grabbing,-moz-grabbing', // doesn't work cursor: '-webkit-grabbing;cursor: -moz-grabbing', // doesn't work It appears no auto prefixing is done, so need to specify both -moz- and -webkit-.

Doh. Thanks Carl.

I've got a gallery of items. When dragged, the box's z-index appears to be higher than elements created before, but lower than ones created after. I want the z-index (for the dragged item) to be higher than all other items, not just the ones created before in the DOM. ie box 1 should move on top of boxes 2 - 5, not under them. I've tried ZIndexBoost. Edit: I've also tried applying style.zIndex="" on click, but it's not working.

TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0}); The aim is to animate top-left to top-right of browser window. In the above, the 'left' property is still being read in the 'to', so it stays top-left. So I tried overriding 'left' with left: "auto": TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0, left: "auto"}); That sets 'left' back to default, but it doesn't animate from the left: 0 specified in the 'from'. Any ideas? Edit : Although I could do this: {top: 0, left: "100%", xPercent: -100, yPercent: 0});

tween = TweenMax.fromTo(class_name, duration, {top: start_y_percent, left: start_x_percent, scaleX: 0, scaleY: 0, xPercent: -50, yPercent: -50}, {top: end_y_percent, left: end_x_percent, xPercent: -50, yPercent: -50, scaleX: 1, scaleY: 1, onReverseComplete:hide, ease: Elastic.easeOut}).progress(current_progress); Box elastic eases in, but on reverse(), I don't want the elastic ease (just the default ease). I've looked at http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/reverse/, but not sure if possible using reverse(). If not, what's the best way to do this? Thanks. UPDATE: I killed the tween and created a TweenMax.to to reverse the animation (but with some different properties).

Thanks Rodrigo. Your method also solves it.

Having issues with tween.fromVars = {}, tween.toVars = {}

http://codepen.io/osublake/pen/pJJZdj