Greetings all,
I'm sure there's a very simple solution to what I'm trying to achieve but my eyes and mind haven't been able to identify one. So, here goes.
I'm trying to animate a bunch of elements that overlap each other and this is made possible by defining the overlap/offset parameter when adding a new Tween to the Timeline. However, when you bunch up a handful of tweens that overlap each other like this:
tl.from(element1, 3, {top:'-428px', ease: Expo.easeOut});
tl.from(element2, 0.4, {'font-size':'0', ease: Back.easeOut}, '-=1.5');
tl.from(element3, 0.4, {width:'0', height:'0', margin:'0', ease: Back.easeOut}, '-=0.2');
The last element (element3) doesn't overlay element2's animation because it waits for the Tween (excluding the offset) to be done. That means it takes element3 3.2 (3 + 0.4 - 0.2) seconds to execute when I'm hoping it would be instantly triggered after element2's completion, which is 1.3 (3 - 1.5 - 0.2) seconds instead of 3.2 seconds. I could easily work around this by setting element3's offset to '-=1.7' but this isn't ideal when you have more animations/tweens queued after it. Here's a jsbin that demonstrates my difficulty: http://jsbin.com/oWeyEKU/1/
I hope I've been able to clearly describe my desired result and the hiccup I've encountered. Here's thanks in advance for any help that I may receive!
