Thank you Mikel and Carl, it's definitely getting better with your suggestions. I'm still rather new to js as a whole so I don't know exactly what order to put things.
I've implemented Mikel's suggestion, as well as the svg color change attribute and would like to add the loop Carl suggested, just not sure where to inject it and what to replace... but as you can see, the code is already much shorter thanks to the both of you. I really appreciate the assistance, guys
There is a small jump at the end of the animation, but I'm sure I can figure out how to smooth that out.
var tl = new TimelineMax(),
dots = [].reverse.call($('.dot')),
waveDots = new TimelineMax();
tl
.from("#post-left", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut})
.from("#post-mid", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut})
.from("#post-right", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut})
.from("#mid-left", 0.2, {scale: 0.2, opacity:0})
.from("#mid-mid", 0.2, {scale: 0.2, opacity:0})
.from("#mid-right", 0.2, {scale: 0.2, opacity:0})
.from("#tip-left", 0.2, {scale: 0.2, opacity:0})
.from("#tip-mid", 0.2, {scale: 0.2, opacity:0})
.from("#tip-right", 0.2, {scale: 0.2, opacity:0})
.set("#side-post", {transformOrigin:'center'})
.from("#side-post", 2, {rotation: 720, x: -300, y: -500, opacity:0}, "test")
.from("#shadow-top, #shadow-bottom", 0.6, {opacity:0})
.to("#dot1", 0.25, {morphSVG:"#f"})
.to("#dot2", 0.25, {morphSVG:"#e1"})
.to("#dot3", 0.25, {morphSVG:"#n1"})
.to("#dot4", 0.25, {morphSVG:"#c1"})
.to("#dot5", 0.25, {morphSVG:"#e2"})
.to("#dot6", 0.25, {morphSVG:"#p"})
.to("#dot7", 0.25, {morphSVG:"#e3"})
.to("#dot8", 0.25, {morphSVG:"#n2"})
.to("#dot9", 0.25, {morphSVG:"#c2"})
.to("#dot10", 0.25, {morphSVG:"#i"})
.to("#dot11", 0.25, {morphSVG:"#l"})
.to(".dot", 1.5, {attr:{fill:"white"}});
waveDots
.staggerFromTo(dots,0.8,{y:-7},{y:7, ease: Sine.easeOut,repeat:10, yoyo:true},0.2)
.to("#dot1", 0.25, {morphSVG:"#f", onStart: stop });
function stop(){
waveDots.stop().progress(0);
}
//tl.seek("test");