erikb

@MindGamer Alas, doesn't look like that approach works. http://codepen.io/jedierikb/pen/jPMRKR or http://codepen.io/jedierikb/pen/eNdojm

Thanks for the well reasoned explanation. I had hoped that elements' _gsTransform would include settable metadata which dictated the order in which transformation rules were applied. If I set the precedence rules on an element then I would not be surprised by the behavior. Alas, this is not an edge case for me. I need to scale elements and then translate them back 50% of their scaled size. I think your suggestion to build my own plugin is not a straightforward suggestion; re-writing your css rules is clearly non-trivial. Also, I am not sure how I would use onUpdate effectively to handle browser prefixes (the first of many issues which come to mind) which I have come to expect greensock to handle.

Is there a way to set precedence for translate and transform css calls on an element? For example, in my pen if I set: TweenMax.set( '#a', { y: '-50%', scale: 2 }); It results in this css: translate(0%, -50%) matrix(2, 0, 0, 2, 0, 0) How would I use greensock to get this result instead: matrix(2, 0, 0, 2, 0, 0) translate(0%, -50%) The latter results in a different position of the element.

codepen example. jammed a whole library in there... sorry. the relevant code is at the bottom. http://codepen.io/jedierikb/pen/oXxvPN?editors=011

This issue [ https://github.com/processing/p5.js/pull/615 ] about interpolating colors for the web project p5.js caught my eye and made me wonder about interpolating between colors in greensock. Are the techniques described therein applied to greensock color tweens Just curious. Thanks.

I would love to use greensock to ease through a bell-curve function. I looked at your build-your-own-ease-easily tool, but it really wants to get me from zero to one (instead of from zero to zero). I suppose I could hack this together with a timeline and two sine-like tweens (one for ramp-up, one for ramp-down). However, I am wondering if that approach is better than building a custom easing function. I really want to control the resultant tween like a normal tween with the full API at my disposal. Thanks for any feedback.

Thanks Jack. I am trying to synchronize the movement of other elements on a drag, and the draggable who leads the pack might be of type "x", "y", or "x,y". As you can see, I got snagged when I started moving things around with only an "x" -- the rest of the Blue Angels flew away in another direction Not to be contentious, but in the documentation in the bit you cited, that passage begins by saying "So for a Draggable of type:"x,y", it would be the y transform translation, as in the csstransform:translateY(...)" In the case of draggable type "x", I would expect the first sentence in the documentation to be honored -- "The current y (vertical) position of the Draggable instance". Also, if it is of interest, the .y value jumps to where I would expect it to be onThrowUpdate http://codepen.io/jedierikb/pen/PwMpeB

https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/y/ says .y returns "The current y (vertical) position of the Draggable instance." However, my codepen shows that when you use a Draggable with type x, the resultant y values during a drag do not return the current y position of the draggable, but rather something closer to the relative y position of the mouse. What should I do differently here?

Your suggestion here worked for me. coolObj.prototype.updateThrow = function( _targetEl, _xOffset, _yOffset ) { this.xOffset = _xOffset; this.yOffset = _yOffset; var overlapSwapPct = "25%"; var that = this; Draggable.create( el, { snap: { x: function( end ) { if (this.hitTest( _targetEl, overlapSwapPct )) { return _xOffset; } else { return 0; } }, y: function( end ) { if (this.hitTest( _targetEl, overlapSwapPct )) { return _yOffset; } else { return 0; } } } } }

After I've moved a draggable and onThrowComplete is fired, I call this.disable() and it works as expected. However, the just-momemnts-ago draggable element's css still has: transform: translate3d(0px, 0px, 0px); z-index: 1001; Is there a way to clear these? Note: on onThrowComplete, I am setting up a new layout which the thrown elements are re-positioned and therefore do not need the transform.

If I assign a tween's callback scope like this: { ..., onCompleteScope: this, ... } How can I get access to the tween object (which was the scope before I set my own this)? Thanks, Erik

How do I set scope for a snap function (in a Draggable.create... )? I would have thought something like 'onSnapScope' or 'snapScope', but neither seem to work. Much thanks.

onDragEnd and onRelease both help me know when a draggable item has been let go. How do I detect when the draggable has slid into its new snappable location (i.e. ended its tween)? I think I am looking for something like "onSnapped"?

More here: http://stackoverflow.com/a/15664831/62255

Thanks for the explanations and pointers! Unfortunately, this issue is causing some of my tweens to run into problems. as the completed tween values are not _quite_ the same as the target values and == checks come back negative. I've worked around this issue with this approach, so I can continue hacking along happily: http://codepen.io/jedierikb/pen/OPoQBJ?editors=101 I am wondering if there is a flag in greensock I could set to get the same behavior?

Here is a tween counting down from 1 to .1 on a generic object, but never quite sticks the landing. I suspect there is a flag or option I am overlooking. http://codepen.io/jedierikb/pen/GgXvQx?editors=101

Needed to set a new duration for a tween altered with updateTo (not to reset the original duration or use what was left of the original duration). Did this by tweenInstance.duration( 10 ); tweenInstance.updateTo( tweenValue: 100, true ); It works, but I fear it might break with later versions. Wondering if it makes sense to overload the second parameter of updateTo by allowing a new duration?

Is there a way to have my onStart function fired immediately when I play() my tween? Currently it looks like it waits until the next tick and gets fired via _internals.lazyRender. Thank you for your help!

That's great news about the upcoming library/utility. You greensocks are prescient. For my purposes, for this project, getBoundingClientRect did the trick.

This gets you the bounding box... https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

Apologies for this being somewhat off topic. Is there a suggested way to use greensock to find the projected screen coordinates of elements that have been tweened by transforms (as indicated by the values in their _gsTransform)? StackExchange has a suggestion and some code. Wondering if there was a built in solution I have overlooked before going down this path. Thanks.

Ah, thanks. I mistakenly thought the constructor could take the child tweens. Fixed codepen: http://codepen.io/jedierikb/pen/yKlex

brainstorming... This did not seem to work either: http://codepen.io/jedierikb/pen/BsJzp

What is the suggested way to kill a timeline and all of its children tweens? In my codepen, my timelineInstance.kill() is not working as I expected. Much appreciated.

I don't think this is a bug, but rather it is an issue which caused me to scratch my head. If I tween x first as a percent (100%) it slides over. Then later if I tween the element's x as a number (0), the element does not slide back. Tweening back to 0% does what I wanted to accomplish. This small discovery might be helpful to other developers?