pakl

Thanks for trying to reproduce it! I'm not sure why but if you change your draggable construction options to: type: 'scrollTop', onDragEnd: restart, edgeResistance: 0.75, throwProps: true, onPress:function(){}, onRelease:function(){} you will see the issue as every time you drag items are added to the container. I need to re-create the draggable because the number of items varies and updating the contents of a draggable doesn't seem to work flawlessly.

Thanks for the input. For what it's worth, here is the hack I used to get around this issue without having to touch my code base too much: (function () { var originalEmpty = jQuery.fn.empty; jQuery.fn.empty = function () { var draggable = Draggable.get(this); if (draggable != null) { draggable.kill(); } return originalEmpty.apply(this, arguments); }; })(); It just overrides the jQuery.empty method, checks for a draggable and kills it before calling the original empty logic of jQuery. Seems to work fine so far. Obviously this is a hack very specific to how I use both jQuery and draggable in this project. I just haven't ever encountered any issues with empty before so was suspecting draggable of doing something unusual here.

Is there a suggested way to re-use/re-create a draggable container?

I'm using a container div that I re-use when populating with different items. That div is also a draggable. Interestingly doing this: $(container).empty(); //add new content to container //recreate draggable var draggable = Draggable.get(container); if (draggable != null) { draggable.kill(); } //create new draggable here will result in the draggable to malfunction in that it suddenly contains both the old and new content which I really don't understand since the container.empty() call should clear all old content of it. Doing this: var draggable = Draggable.get(container); if (draggable != null) { draggable.kill(); } $(container).empty(); //add new content //recreate draggable works just fine but it's awkward that I can't rely on $(container).empty to actually clear the div properly. How is it possible that .empty() doesn't remove content properly inside a draggable?

Is there a way to use ScrambleText to animate the value of an <input /> element?

I didn't know that I can use tweenTo to do this. Thanks for the info.

AFAIK, the only way to apply an easing function to a timeline is to tween the .progress() of that timeline. It's great that this works but it would be really handy to have direct support to specify an easing function to a timeline. Not sure how involved that feature would be.

thanks for the reply! I see that this is definitely more complex than expected. Will give it a go and report back.

To better illustrate what I'm after, this is what I used to do with createjs/tweenjs: //we are using our own heartbeat for the ticker so let's disable the default ticker if (createjs.Ticker) { createjs.Ticker.setPaused(true); } Tween = createjs.Tween; //custom TweenJS.tick implementation to enable tweens to run either on game time (default) or on real time (isRealTime) var tweenTick = function (gameDelta, drawDelta) { var tweens = createjs.Tween._tweens.slice(); // advancing tweens can create new or delete existing tweens. for (var i = tweens.length - 1; i >= 0; i--) { var tween = tweens[i]; var ticks = tween._useTicks ? 1 : tween.isRealTime ? drawDelta : gameDelta; if (ticks && !tween._paused) { tween.tick(ticks); } } }; //I would then call tweenTick in my drawloop Is there a similar array of tweens? or a .tick() method I can replace? I need to make sure that those animations run at the exact same heartbeat than the rest of the game logic.

Can you point me to where I can find this ticker? I don't mind hijacking the method and making this a special case for my projects but not having the ability to provide a custom heartbeat to all or some tweens is a major hindrance and setting a timescale on some tweens is just not the same. For one, I still need the ability of a timeScale on those tweens and workarounds to multiply into current timescales seems extraordinarily hacky for something that is as simple as 'provide a different delta on tick'.

My point is that this isn't a br tag. it should just be considered ordinary plain text and thus should display as <br>. Instead, it displays as {{LT}}br>

I don't actually need this functionality but since it's clearly a bug I thought it's worth reporting. Having a '<br>' string when using splittext chars animations, will turn it into '{{LT}}br>'. http://codepen.io/patrickklug/pen/wFkbL

I want to be able to flag specific tweens (or timelines) and then advance these tweens based on a custom heartbeat that does not progress in real time. Use case: I want to use greensock for both UI animations but also for animating in-game objects. While UI animations always run in real time, game animations should run in game time and can be slowed down, sped up or paused entirely. In other libraries I usually overwrote a static .tick method and then filtered out the flagged tweens and provided a different delta in the tick call for those objects but I'm having trouble finding the right method in greensock to achieve this.

I stumbled upon another oddity when using splittext on a text with line breaks: <div class="test1">This results <br>in six words.</div> results in six words and one linebreak. <div class="test2">This results <br>in seven words.</div> results in seven words (one of which is empty) and what looks like two linebreaks. The difference between test1 and test2 is that the second one has two spaces before the linebreak. Since a space is normally not treated as a word, this seems like a bug to me. Multiple spaces should be treated the same as a single space. Demo here: http://codepen.io/patrickklug/pen/wFkbL

Thanks Jack, I'll give it a whirl.