killroy

Well, at the very least document this behavior, since by default your code actively interrupts my code. Perhaps console.log a statement: "Canceling drag action due to context menu invocation". The problem is, the code above kills ALL contextmenu events. This works for me as I don't care about these, but ideally I could disable just the GSAP interception of the event and not interfere with other code.

I've looked further into this. This CSS property is no longer supported by Chrome. I imagine it's since the WebKit/Chrome split. Please note the ref page https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout states: "This article is in need of a technical review." And shows that Chrome does not support this property.

Hey, thanks for your replay (and patience). I agree that default behavior should be adhered to be default. I just am not sure how dragging will ever really work, unless it's a quick swipe action, if after 600ms or so it gets automatically cancelled. Might warrant a mention in the docs. I will try that CSS and report back tomorrow. Thanks. PS: Do you guys show case larger projects using GSAP somewhere? I'm preparing for GDC Europe right now so should have demo-able material pretty soon.

The current version 0.13.0 (I was using 0.11.0) still has the offending code at line 1865: _addListener(_doc, "contextmenu", function(e) { var p; for (p in _lookup) { if (_lookup[p].isPressed) { _lookup[p].endDrag(); } } }); ... just confirmed that the same issue persists. Just add some logging there and you'll see that handler firing within a couple of 100ms of pressing the drag-able item.

Hi, But windows I mean Chrome on Windows (not ...Phone, just "Windows"... the OS). I am working on an HTML5 game and I am developing it on Windows and am currently testing it on Android. This code keeps it working for now: document.addEventListener('contextmenu', function(e) { e.stopImmediatePropagation(); }, true); since it disables the rogue GSAP code by pre-empting the contextmenu handler. It seems pretty obvious to me that you cannot cancel a drag operation on a "long press" event, since long presses are what usually start a drag operation. I will try the latest Dragable version when I have time. Why did you link to the CSSPlugin?

Wow, just encountered this again and Googling the issue I only find myself with the same question asked and still unanswered. I'm currently tracing into the issue. The release originates from this code in Draggable.js (line 1597): _addListener(_doc, "contextmenu", function(e) { var p; for (p in _lookup) { if (_lookup[p].isPressed) { _lookup[p].endDrag(); } } }); It appears that on windows, this code does not get executed, but somehow on android Chrome it does. Any ideas?

I'm currently working on making them JSON compatible with variable substitution, etc. I'll let you know how it goes. Being able to store the animations as JSON will make it much easier to create, transform, transmit and replace them.

It's a turn based, two player game. Each player makes multiple actions each turn which result in a variety of animations. I want a player to click on his turn history and replay everything from 3 turns back at 4x speed, for example. I had hoped by adding everything to a single, global timeline, I'd be able to do this. The animations need to be dynamic. For example I might define a moveTo(x, y) animation that has multiple steps, lifting the item, sliding it over, etc. I want to reuse this animation for multiple moves. Currently my syntax is a bit clunky, but something along these lines: anim.register('showHoverCard', [ ['clear'], ['set', {x: '$1', y: '$2', scale: 0}], ['show'], ['add', function(){self.isVisible = true;}] ]);

The more I work on this, the more I am missing a major feature, which is re-playable, dynamic animations. Which is what I am currently implementing. For example, in my case I can define a named animation, something like 'moveCard' and do something like this: card.anim.play('moveCard', x, y); Underneath, it currently has to create a new timeline and add the items required for the animation. I cannot replay an existing timeline, since the arguments are "baked" into it. So I had to create another layer on top. I wonder if this might be better as some kind of plug in...

The more I think about it the less I feel it will work the way I want. For example how would .clear() work in the context of nested timelines, where I don't want to clear the global one, only the keyframes related to a particular object. I think the problem is that GSAP isn't organised by the elements beign animated. I already abstracted away those refs, because of course a thing always wants to move itself and should never move something else. I'll keep at it and let you know how it works out. I might have to go back to using GSAP just for the actual animations but not the long term management. Oh, and that is not a complicated animation compared to what will result from 20-30 minutes of game-play in a multi-player game

I'm building an animation engine, so there are no animations in there. Just a frame work for storing and playing back animations across my ECS framework. The (.play()).play() seems to work for now. I'll see if I run into more issues. I think a lot of my issues come from the fact that GSAP is designed for small, localized animation tasks, such as needed in websites, and not for bigger stuff like my game. It's not that GSAP isn't capable, more that the default operation modes are designed for that sort of use. Is there any information available how GSAP handles time lines internally? I am a bit concerned about adding sub-timelines to a larger timeline for a 20-30 minute game and what sort of memory it might leak.

Ok, it seems that the timeline automatically looses its "playing" state when it hits the end. So I always have to do this: root.add(newTl.play()).play(); Let's see if that fixes it...

Hey, To be honest, I don't think it's a bug, I think it's a problem with the intuitiveness of the system and the lack of documentation. What I am trying to build is a system of animations, where I can "create" animations ahead of time and then inject copies of those at will into a global timeline. The idea is that I can globally affect playback speed and even jump back and replay some of what has happened. These sub-timelines, ideally support set, to and add functionality (for events). Here is a codepen: http://codepen.io/killroy/pen/KwEmLJ The core concept is this: var root = new TimelineLite(), t1 = new TimelineLite({paused: true}), t0 = new TimelineLite({paused: true}), t1.to(...).add(...); t2.set(...); setTimeout(function() { // Simulate event t0.add(t1.play(); }, 100); setTimeout(function() { // Simulate event t0.add(t2.play(); }, 500);

Just to let you know, there was interference from other code that manipulated the object through a different timeline with a set. There go 5 hours I'll neveer get back!

It's hard to extract as I am working on an animation framework for my game. I believe it's related to some parts of the demo just not being ready when GSAP tries to manipulate it. So, set and short to delays don't work, but a to with a 1 second duration work. Is there some way to get GSAP to report if there is a problem? Right now it just fails silently without modifying the DOM.

Follow up: Nope, that's not it. Still have a case where set and to,0 do not work, but to,0.0001 works, but intermittently. Almost like it's a timing issue. By "not work" I mean the values are NOT updated at all.

Hey, I get your arguments, and man that was a thorough and detail answer. RESPECT! The option I was remembering was immediateRender. Where is that in the docs? It would be good to list at least all the options that are fixed, especially if you're going to mash up arbitrary property references with internal flags, etc. I know it makes for simpler, more elegant code, I do the same in my own engine, but It leaves the API user often lost and confused.

The documentation is extremely incomplete in that most functionality is hidden behind an anonymous "vars" argument. Is there any documentation enumerating all the arguments that are supported by the various methods? For example, often it simply says "An object defining the value for each property that should be set.". But this is plainly not true as you support only a sub-set of all properties as well as magical properties that don't exist in CSS (like scale, etc). It also does not document the various magical, hidden, secret, whatever options and switches that can be set. Time and time again I come across forum answers that say something like "Simply set magicalProp: true". But of course there was no way for us to even guess such a property even exists. For example, I am once again hitting the wall that "set" sets values immediately, not at the correct place in the timeline. I vaguely remember seeing some magical switch ones that makes this work correctly. But of course it's not documented anywhere, and to find it in the forum, I need to know what the answer is before. So, is there actual documentation of the supported properties for each "vars" object for each method, such as "to" and "set", etc? Yours truly frustrated, Sven

I suggest perhaps putting the value in quotes "easing", because as it is it can also mean that I used the correct property but the wrong "easing" value for it I'm temped to monkey patch, as it's an easy change, but it would be a pain to maintain. I guess you don't accept pull requests?

Could we improve that error message to include a stack trace and the invalid property name? This would make debugging things so much easier and more professional.

In the meantime I kept coming up against this problem. I set up browserify aliases, which then clashed with the different internal references in GSAP. Finally after searching the source code I found that this worked: var TweenLite = window.GreenSockGlobals.TweenLite; Not a great solution. I still hope they will clean things up a bit and make them more reliable and less namespace polluting.

When doing a simple tween: tl .set("#blueBox", { x: 200, y: 20, scale: 0.5 }) .to("#blueBox", 3, { scale: 1, easing: Power2.easeOut }) I get these errors in the console: invalid easing tween value: [object Object] What causes this and how do I fix it? Thanks

I have following code: new Draggable($hand, { cursor: 'auto', onPress: function(e) { t0 = Date.now(); console.log('handHover.onPress'); }, onRelease: function(e) { console.log('handHover.onRelease'); console.log(Date.now() - t0); } }); And onRelease fires between 680 and 690 ms after onPress fires. No matter what I do on the screen. It seems some internal mechanism cancels the touch even after around 700ms. How can I disable this and correctly capture touch events?

Since the transform attribute is a string, how can I animate the scale? I updated the codepen to try this, which of course does not work: t3.to("#text3", 1, {attr:{transform: 'scale(2)'}}) .to("#text3", 1, {attr:{transform: 'scale(1)'}}); Neither does this work: {attr:{transform: {scale: 2}}}

When invoking .to(..., ..., {scale: value}) GSAP seems to create a style="transform: scale()" property on the element which does not work inside SVG. It should be transform="scale()" which does work. I'm guessing this is a negative interaction with the CSS plug-in. How can I force GSAP to use the correct property names? The codepen demo demonstrates this by puling the scale value off _gsTransform in onUpdate and applying it to the "transform" attribute.