GreenSock last won the day on August 7

GreenSock had the most liked content!

GreenSock

Administrators
  • Content count

    11,218
  • Joined

  • Last visited

  • Days Won

    312

GreenSock last won the day on August 7

GreenSock had the most liked content!

Community Reputation

4,502 Superhero

5 Followers

About GreenSock

  • Rank
    Administrator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

42,844 profile views
  1. Hm, that's a little tricky in Three.js, but I think this'll do it: var _gsScope = (typeof module !== "undefined" && module.exports && typeof global !== "undefined") ? global : this || window; (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push(function () { "use strict"; var _xyzContexts = "position,scale,rotation".split(","), _contexts = {x:"position", y:"position", z:"position"}, _DEG2RAD = Math.PI / 180, _visibleSetter = function(target, start, end) { var time = end ? 0 : 0.999999999; return function(ratio) { var value = (ratio > time) ? end : start; if (target.visible !== value) { target.visible = value; target.traverse(function (child) { child.visible = value; }); } }; }, _addFuncPropTween = function(tween, func) { var proxy = {setRatio: func}, backward = !!tween.vars.runBackwards, pt = {_next:tween._firstPT, t:proxy, p:"setRatio", s:backward ? 1 : 0, f:1, pg:0, n:"setRatio", m:0, pr:0, c:backward ? 0 : 1}; tween._firstPT = pt; if (pt._next) { pt._next._prev = pt; } return pt; }, _degreesToRadians = function(value) { return (typeof(value) === "string" && value.charAt(1) === "=") ? value.substr(0, 2) + (parseFloat(value.substr(2)) * _DEG2RAD) : value * _DEG2RAD; }, i, p; for (i = 0; i < _xyzContexts.length; i++) { p = _xyzContexts[i]; _contexts[p + "X"] = p; _contexts[p + "Y"] = p; _contexts[p + "Z"] = p; } var ThreePlugin = _gsScope._gsDefine.plugin({ propName: "three", priority: 0, API: 2, version: "0.0.2", init: function (target, values, tween, index) { var context, axis, value, p, i, m; for (p in values) { context = _contexts[p]; value = values[p]; if (typeof(value) === "function") { value = value(index || 0, target); } if (context) { i = p.charAt(p.length-1).toLowerCase(); axis = (i.indexOf("x") !== -1) ? "x" : (i.indexOf("z") !== -1) ? "z" : "y"; this._addTween(target[context], axis, target[context][axis], (p.indexOf("rotation") !== -1) ? _degreesToRadians(value) : value, p); } else if (p === "scale") { this._addTween(target[p], "x", target[p].x, value, p + "X"); this._addTween(target[p], "y", target[p].y, value, p + "Y"); this._addTween(target[p], "z", target[p].z, value, p + "Z"); } else if (p === "opacity") { m = (target.material.length) ? target.material : [target.material]; i = m.length; while (--i > -1) { m[i].transparent = true; this._addTween(m[i], p, m[i][p], value, p); } } else if (p === "visible") { if (target.visible !== value) { _addFuncPropTween(tween, _visibleSetter(target, target.visible, value)); } } else { this._addTween(target, p, target[p], value, p); } this._overwriteProps.push(p); } return true; } }); }); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } Does that work for you?
  2. That should actually only be implemented if you enable autoScroll, but there was a regression in a recent version that could cause it to show up in other situations. Sorry about that. It is indeed necessary to prop open the container when you're dragging something inside a scrollable container. It should be resolved in the upcoming release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Does that work better for you? It was tough for me to verify in your case because you didn't provide a codepen or jsfiddle example. If you're still having trouble, that'd be super helpful (a reduced test case codepen). Thanks!
  3. I just whipped together a quick plugin for you that should help: var _gsScope = (typeof module !== "undefined" && module.exports && typeof global !== "undefined") ? global : this || window; (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push(function () { "use strict"; var _xyzContexts = "position,scale,rotation".split(","), _contexts = {x:"position", y:"position", z:"position"}, _DEG2RAD = Math.PI / 180, _degreesToRadians = function(value) { return (typeof(value) === "string" && value.charAt(1) === "=") ? value.substr(0, 2) + (parseFloat(value.substr(2)) * _DEG2RAD) : value * _DEG2RAD; }, i, p; for (i = 0; i < _xyzContexts.length; i++) { p = _xyzContexts[i]; _contexts[p + "X"] = p; _contexts[p + "Y"] = p; _contexts[p + "Z"] = p; } var ThreePlugin = _gsScope._gsDefine.plugin({ propName: "three", priority: 0, API: 2, version: "0.0.1", init: function (target, values, tween, index) { var context, axis, value, p, i, m; for (p in values) { context = _contexts[p]; value = values[p]; if (typeof(value) === "function") { value = value(index || 0, target); } if (context) { i = p.charAt(p.length-1).toLowerCase(); axis = (i.indexOf("x") !== -1) ? "x" : (i.indexOf("z") !== -1) ? "z" : "y"; this._addTween(target[context], axis, target[context][axis], (p.indexOf("rotation") !== -1) ? _degreesToRadians(value) : value, p); } else if (p === "scale") { this._addTween(target[p], "x", target[p].x, value, p + "X"); this._addTween(target[p], "y", target[p].y, value, p + "Y"); this._addTween(target[p], "z", target[p].z, value, p + "Z"); } else if (p === "opacity") { m = (target.material.length) ? target.material : [target.material]; i = m.length; while (--i > -1) { m[i].transparent = true; this._addTween(m[i], p, m[i][p], value, p); } } else { this._addTween(target, p, target[p], value, p); } this._overwriteProps.push(p); } return true; } }); }); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } Just load that once and then you'll be able to put everything in a "three:{}" object, like: TweenMax.to(sprite, 2, {three:{scaleX:2, scaleY:1.5, x:200, y:100, opacity: 0.5}, ease:Power2.easeInOut}); I haven't done a ton of testing, but it should support: x, y, z (like position.x, position.y, position.z) scaleX, scaleY, scaleZ, or just "scale" to do all 3 at once (like scale.x, scale.y, scale.z) rotationX, rotationY, rotationZ (like rotation.x, rotation.y, rotation.z) - IMPORTANT: as a convenience, you define them in degrees, not radians! opacity supports function-based values. Is that what you're looking for?
  4. I think the simplest thing to do here is just use a very simple plugin that senses which property name to use and then just works accordingly (and completely ignores things on browsers that offer no support). I whipped one together for you: var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() { "use strict"; var cs = getComputedStyle(document.documentElement), prop = cs.webkitClipPath ? "webkitClipPath" : cs.clipPath ? "clipPath" : null; _gsScope._gsDefine.plugin({ propName: "clipPath", API: 2, version: "1.0.0", overwriteProps: ["clipPath"], init: function(target, value, tween, index) { if (prop) { this._addTween(target.style, prop, getComputedStyle(target)[prop], value, prop); } return true; } }); }); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } Does that help? You just load that once up front, and it takes over all your "clipPath" tweens. You don't need to mess with adding webkitClipPath conditionally or anything.
  5. GSAP adds prefixes for supported CSS properties, yes, but clipPath isn't one of those. To fully support it, we'd need to add a ton of extra code that isn't very feasible at this point. It's not even supported at all in several browsers. And it can technically be a URL, a rectangle, circle, polygon, etc. - trying to accurately parse and interpolate between them all is a very tall order. Given the poor browser support and all the kb necessary to do that, I'm not inclined to add official support. You can, of course, use an onUpdate and GSAP's built-in string parsing to do whatever you want.
  6. hue

    In case you haven't seen it: https://greensock.com/docs/Plugins/EaselPlugin You might try the "colorize" option, as in colorize:"yellow" (not sure that'll give you exactly what you want - just something to try). Or tint is a different effect that might work. If you have any questions about implementation or something, feel free to ask here.
  7. hue

    I think that the way EaselJS applies it is like a filter - a matrix through which the original color is viewed whereas perhaps Fireworks treats it in a more absolute way (like a raw color). I'm not a Fireworks expert, so I couldn't say for sure. So maybe in Fireworks, a hue of 65 is ALWAYS yellow (absolute) whereas if it's a filter (as in EaselJS), a hue shift of 65 would look completely different if it's on a red object than a blue object. What exactly is your goal?
  8. Yep, TweenMax.getAllTweens() includes delayedCalls (though you could loop through and exclude them if you want - just look for tweens whose target matches their vars.onComplete). And yeah, I think the null target tweens were from you As for why the timelines are jumping when you set timeScale to 0, it's actually because you're setting the nested tween inside that timeline to have a timeScale of 0 and since TimelineLite/Max instances don't have smoothChildTiming enabled by default (for good reason), it makes that tween render at a very different position. Think of it in terms of the playhead's position on a timeline - if you change the timeScale of a tween that starts at 0, for example, and it's 1 second into its animation but then you change its timeScale to 0.1, that means that where the playhead is positioned on the parent timeline, it'd line up with a time of 0.1 on that child tween (thus it'd jump). That's what smoothChildTiming solves - it's shove the startTime backwards on that child tween so that the playhead lines up. I know, it's probably a little mind-bending. But my point is that it's working exactly the way it's supposed to. SOLUTION: Just filter out the nested tweens/timelines from your TweenMax.getAllTweens() array. There's no reason to alter the timeScale of nested stuff anyway since when you alter the parent timeline, it affects its playhead, thus all of the children. Here's some code you can just replace your TweenMax.getAllTweens() with: //just a quick way to grab the root timeline var rootTimeline = TweenLite.to({}, 0.01, {}).timeline; function getAnimations() { var a = TweenMax.getAllTweens(true), i = a.length; while (--i > -1) { //exclude anything that's nested if (a[i].timeline !== rootTimeline) { a.splice(i, 1); } } return a; } So now, when you call getAnimations(), you'll only get back stuff that's on the root. Make your edits to those and you should be golden. However, I'm still concerned about the exportRoot() thing - can you explain to me how to reproduce the problem? Like exactly what do I click, how many times, in what sequence to get it to break? I'd REALLY like to make sure that works flawlessly. I wasn't able to get it to break in the updated version but I was probably just doing something wrong.
  9. No problem at all. And I'm sorry I don't have a great answer for you that gives you all the functionality you wanted. I guess with all these browser inconsistencies, sometimes we've gotta make some compromises. Cheers!
  10. It works fine for me in iOS. I poked around some more and it looks like those browsers on Android make it pretty much impossible to solve because: The long-touch triggers a "touchcancel" event (which in turn causes Draggable to call onRelease, as it should). That's likely because the long-touch triggers a contextMenu, but of course you don't want that which is why Draggable intercepts that event and calls preventDefault() and stopPropagation() in that case. This should, in theory, prevent that touchcancel from ever occuring...but in the browsers you mentioned on Android, that doesn't seem to be the case. It fires it anyway. Once the "touchcancel" event is fired, it basically kills the interaction and "touchmove" events aren't fired anymore (until you touch again, of course). That's why Draggable calls the onRelease. It SHOULD. We can't just have Draggable ignore the "touchcancel" because it'd act like the press is stuck. Moving your finger wouldn't drag because the browser is now refusing to fire touchmove events. The only way to circumvent all this is to call preventDefault() on the original touchstart event, but if you do that, it will refuse to allow any touch-scrolling. This is why setting allowNativeTouchScrolling:false fixed the issue - it allows Draggable to call preventDefault() on that touchstart event. But you said you want to keep native touch-scrolling. On Android devices, Draggable must wait for the first movement to discern the user's intention and either preventDefault() or not on the event. So it's quite a conundrum. Due to odd behavior on Android browsers, as far as I can tell it's logically impossible to get all the behavior you're asking for. It doesn't even work to set touch-callout and user-select to none (which typically would prevent any context menu). No matter what, that touchcancel event is triggered. Unless I'm missing something. Please let me know if you (or anyone else) can figure out a solution.
  11. Sure, you can combine cycle with morphSVG. You just had an extra "," in your array, and your "birds" was only one element, not an array (the stagger methods expect an array or array-like target). Use querySelectorAll() instead of querySelector() for ".birds" and you should get the result you wanted. Does that help?
  12. Thanks for putting the demo together - super helpful. I actually tweaked a few things in the exportRoot() method in the upcoming release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - are you able to reproduce the problem with that? I won't have time to look into this further until tonight or tomorrow, but I did poke around a little bit and when I was using the updated version, the only problem I was running into was that it seemed like your code was creating tweens of null targets (which isn't good )
  13. Hmm, this sounds like the perfect use case for TimelineLite.exportRoot() but you said you already looked into that - can you help me understand why that wouldn't work for you? Got a demo? I'd love to help. I just can't imagine there'd be a need for running two different copies of GSAP. I bet there's a better solution we could craft. I just need a little more context. And again, a reduced test case would be super duper helpful.
  14. I don't think it's getting released, it's not firing the onPress because on certain devices in order to accommodate native touch scrolling, it has to wait for the first movement to discern the user's intent. Your code is written in such a way that it'll keep moving the element unless the onPress is fired, so I bet you're assuming it is calling onRelease because it keeps moving (right?). Try setting allowNativeTouchScrolling:false on the Draggable. Seemed to work well for me.
  15. Yep, @OSUblake is a rock star around here. Not exactly an "employee", but certainly an authoritative moderator and we consider him very much a part of the GreenSock family, along with all the other moderators like @PointC. Happy to hear about your positive experience thus far, @Sembiance. Let us know if you need anything else. Happy tweening!