Scrub through a Tween group containing chained tweens

[optimus007]

I have a tweenGroup containing tween_a, tween_b & tween_c

i first do tween_a.start(0)

then pass the time in the tweenGroup.update(time)

this works nicely to the end but i can't scrub in reverse

to fix this issue whenever i scrub i stop all the tween and again do tween_a.start(0)

is there a better way to achieve scrubbing ?

Code snippet

const tweenGroup = new TWEEN.Group()
const tweenArray = []
for (let index = 0; index < 3; index++) {
	const forTween = { val: 0 }
	const tween = new TWEEN.Tween(forTween)
		.to({ val: 1 })
		.duration(1000)
		.group(tweenGroup)
		.easing(EASINGS.QuadraticInOut)
	tween.onUpdate(() => {
		// do stuff
	})

	tweenArray.push(tween)
}

for (let index = 0; index < tweenArray.length; index++) {
	const tw1 = tweenArray[index]
	const tw2 = tweenArray[index + 1]

	if (tw2) {
	tw1.chain(tw2)
	}
}

[trusktr]

It was not really designed to go in reverse, especially chained tweens, although in some cases (non-chained) it works to some extent.

What you may have to do is instead of chaining, play/stop/update individual tweens at the right time.

---

This brings up the concept of a Timeline sort of API, which I personally believe would be a great addition to the API (whether as a separate package or not, but Tween would need some tweaks for it to work out perfectly).

We'd need to make sure Tweens are fully reversible (just like the .yoyo feature essentially does).

Right now, I feel like Tween does too much; that addons like yoyo and chain are essentially what a more broader Timeline API can cover, and we can remove and simplify some features from/in the Tween class. Either remove, or make APIs like yoyo and chain return new tweens with a composed tween function. This way Tween is not doing anything more than tweening (i.e. not orchestrating what should be a timeline).

What could it look like (I thought I wrote something about this in another issue, couldn't find at the moment):

// replacement for `tween1.chain(tween2.chain(tween3))`
const timeline1 = new Timeline(tween1, tween2, tween3)

// now set timeline1 to any time (scrub)
timeline1.to(300)

// tweens don't yoyo, but timelines would
timeline1.yoyo() // implies double duration

// perhaps timelines can be composed of timelines
const timeline2 = new Timeline(...)
const timeline3 = new Timeline(timeline1, timeline2)

// ...

and it handles the rest. Plus more features that Timeline APIs tend to have. We'd need to flesh out the details.

[optimus007]

that sounds great, since we are so close to the timeline functionality with chain, it would be great to just have it here.

maybe the api can start with timeline.start() and timeline.update(timeInMs)

scrubbing was requested #13 long ago but got closed in favor of sequencer.js which is no longer maintained maybe something from there might be useful

[trusktr]

The thing about .chain() is that tweens aren't aware of the whole chain. They transition from a tween to their next one, but arbitrarily going to some time doesn't work because they've no idea what's beyond themselves or their immediate next chained tween, no sense of overall timeline.

It could be possible to update Tween and be able to .update() time backwards and so long as the steps are small enough, it can jump back to the previous Tween but this needs some updates to work properly, and I feel like the code for it will get more complicated.

A Timeline can start off similar to the Group class, with a sequence of Tweens, but it would know the duration of each, and over time it would simply update to whichever Tween is needed. It seems the same amount of work, but with better potential for the future.