I think this is going to become a much more highly requested feature as mobile quickly takes over the world.
I'm making an an animation where on desktop it animates almost exactly the same as it does on mobile. It is a fairly complex animation with many tweens in the time line. The easiest way to make the tiny alterations to the mobile version of the animation is to make a complete copy of the time line and then alter the copy while leaving the original in tact. This is absolutely terrible for maintainability though since it introduces a huge amount of code repetition. Yuck! XP
This is how I imagine a conditional tween could be introduced into GSAP:
var a = 1;
var b = 2;
var TL = new TimelineMax();
TL
.to('#element', 1, { opacity: 1 })
.to('#element', 1, { scale: 2, condition: a == b }) //if a = b include this in the timeline, else ignore this step
.to('#element', 1, { opacity: 0 })
;
This is how I currently do the equivalent of that (note the code repetition in the first and last steps):
var a = 1;
var b = 2;
var TL = new TimelineMax();
if (a == {
TL
.to('#element', 1, { opacity: 1 })
.to('#element', 1, { scale: 2 })
.to('#element', 1, { opacity: 0 })
;
} else {
TL
.to('#element', 1, { opacity: 1 })
.to('#element', 1, { opacity: 0 })
;
}
The .shiftChildren() method sounds like it works but it's extremely unintuitive and confusing, especially if you have to do it with a timeline with a huge number of steps in it. We really need a simple out-of-the-box way of doing conditional tweens directly in a GSAP timeline.