[Draggable: jQuery.empty() does not work when div is draggable]

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.

[Draggable: jQuery.empty() does not work when div is draggable]

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.

[Draggable: jQuery.empty() does not work when div is draggable]

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

[Draggable: jQuery.empty() does not work when div is draggable]

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?

 

 

[set the value of an input via ScrambleText]

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

[Ease of use feature: Apply an easing function to a timeline]

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

[Ease of use feature: Apply an easing function to a timeline]

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.

[Running some tweens on a custom ticker]

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

[Running some tweens on a custom ticker]

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.

[Running some tweens on a custom ticker]

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'.

[Bug: <br> turns into {{LT}}br> when using splittext]

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>

[Bug: <br> turns into {{LT}}br> when using splittext]

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>'.

 

See the Pen wFkbL by patrickklug (@patrickklug) on CodePen

[Running some tweens on a custom ticker]

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.

[SplitText: <br> tags and spaces (part 2)]

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:

 

 

See the Pen wFkbL by patrickklug (@patrickklug) on CodePen

[SplitText: <br> tags and spaces]

Thanks Jack, I'll give it a whirl.

[SplitText: <br> tags and spaces]

@Jack what is the best way to link to the latest version in a codepen?

 

I tried the new version locally and it seems that there is a breaking bug.

 

Using splittext on 'This is a test<br><br>Normal italic bold underline' returns a `.words` array with only 3 elements.

[SplitText: <br> tags and spaces]

I'm working on applying styling to certain words after using SplitText. To do this I'm relying on the word index but I see some inconsistencies when a linebreak is considered a word and when it isn't.

 

The following pen illustrates:

 

 

As you can see when a linebreak is followed or preceded by a space it will end up as a separate line and word after SplitText but if two or more linebreaks are not separated by anything else, they are combined into one line/word.

 

I think it's fair to consider this a bug. A linebreak should always end up as its own line with its own word, or am I missing something?

See the Pen goGuA by patrickklug (@patrickklug) on CodePen

[Bug: Can't use < or > in SplitText content]

that did it. Thanks for the quick help

[Bug: Can't use < or > in SplitText content]

Thanks for the quick response Carl.

 

Can you point me to the updated SplitText source. My original pen still seems to grab an outdated version.

[Bug: Can't use < or > in SplitText content]

Ah, I see. Unfortunately I can't use 'chars' in my use-case. Too many divs. Do I need to report this as a bug to support separately or are greensock monitoring the forums?

[Bug: SplitText.revert() removes trailing <br> tags]

Sorry about using the old version. I was just forking the first splittext example I could find. The bug (or a similar one) is in the latest version, which I assume is beta 0.2.4. 

[Bug: SplitText.revert() removes trailing <br> tags]

When reverting a SplitText operation any trailing line breaks are removed from the text, causing a different result:

 

See the Pen Deiba by patrickklug (@patrickklug) on CodePen

[Bug: Can't use < or > in SplitText content]

Adding any < or > characters to a text causes these characters and anything enclosed between them to be omitted from the resulting text.

 

There is also a related issue where <br> causes an exception in SplitText.js:206.

See the Pen ukvbL by patrickklug (@patrickklug) on CodePen

[unexpected behaviour when changing .from -> .fromTo]

I see. Thanks for your help!

 

I didn't expect that I need to set this. I'm sure there is a reason but I fail to see why this is necessary. I'm trying to animate to different sets of properties. Why do I need to specify both a from and to?

 

EDIT: was posting at the same time as jamiejefferson. makes sense now. thanks for the clarification.

[unexpected behaviour when changing .from -> .fromTo]

Just starting with GCAP. It's my understanding that .fromTo allows me to specify two different sets of values to achieve both a to and from tweening in one step.

 

I tried to use this in the following example:

var tl = new TimelineMax();


tl.from('#test', 1, {
left: -50,
});


tl.fromTo('#test2', 1, {
left: -50
},{
  color : 'red'
});

example here: 

 

to my surprise #test2 only seems to do the 'to' part but no longer the 'from' left animation.

 

What am I missing?

 

See the Pen dGCsy by patrickklug (@patrickklug) on CodePen