c4rlyoungm4n

Hey Zack, thanks for taking the time to reply to me with your suggestions. Its very much appreciated!

Hey Guys, I'm currently playing around with Timeline and morphSVG. The animation is morphing different words into each other with a blob inbetween to make it appear a little smoother. The animation is working perfectly but I’m just wondering how to better achieve the same effect. For instance Can I set some kind of default for morphing back to the blob so I don't have to repeat the code? Is using a label the correct way to section the animation? Can I use a loop so I don't have to keep repeating each path of the logo? var dur = 0.6; var delay = 1; var blobTiming = '>0.2'; var wordTiming = '>1'; tl.to('#logo #path1', dur, { morphSVG: '#blob' }, delay) .to('#logo #path2', dur, { morphSVG: '#blob' }, delay) .to('#logo #path3', dur, { morphSVG: '#blob' }, delay) .to('#logo #path4', dur, { morphSVG: '#blob' }, delay) .to('#logo #path5', dur, { morphSVG: '#blob' }, delay) .to('#logo #path6', dur, { morphSVG: '#blob' }, delay) .to('#logo #path7', dur, { morphSVG: '#blob' }, delay) .to('#logo #path8', dur, { morphSVG: '#blob' }, delay) .call(removeElement('#logo #path6')) .call(removeElement('#logo #path7')) .call(removeElement('#logo #path8')) .addLabel('endofblob-1', blobTiming) .to('#logo #path1', dur, { morphSVG: '#who #path1' }, 'endofblob-1') .to('#logo #path2', dur, { morphSVG: '#who #path2' }, 'endofblob-1') .to('#logo #path3', dur, { morphSVG: '#who #path3' }, 'endofblob-1') .to('#logo #path4', dur, { morphSVG: '#who #path4' }, 'endofblob-1') .to('#logo #path5', dur, { morphSVG: '#who #path5' }, 'endofblob-1') .addLabel('endofwho', wordTiming) .to('#logo #path1', dur, { morphSVG: '#blob' }, 'endofwho') .to('#logo #path2', dur, { morphSVG: '#blob' }, 'endofwho') .to('#logo #path3', dur, { morphSVG: '#blob' }, 'endofwho') .to('#logo #path4', dur, { morphSVG: '#blob' }, 'endofwho') .to('#logo #path5', dur, { morphSVG: '#blob' }, 'endofwho') .addLabel('endofblob-2', blobTiming) .to('#logo #path1', dur, { morphSVG: '#how #path1' }, 'endofblob-2') .to('#logo #path2', dur, { morphSVG: '#how #path2' }, 'endofblob-2') .to('#logo #path3', dur, { morphSVG: '#how #path3' }, 'endofblob-2') .to('#logo #path4', dur, { morphSVG: '#how #path1' }, 'endofblob-2') .to('#logo #path5', dur, { morphSVG: '#how #path2' }, 'endofblob-2') .addLabel('endofhow', wordTiming) .to('#logo #path1', dur, { morphSVG: '#blob' }, 'endofhow') .to('#logo #path2', dur, { morphSVG: '#blob' }, 'endofhow') .to('#logo #path3', dur, { morphSVG: '#blob' }, 'endofhow') .to('#logo #path4', dur, { morphSVG: '#blob' }, 'endofhow') .to('#logo #path5', dur, { morphSVG: '#blob' }, 'endofhow') .addLabel('endofblob-3', blobTiming) .to('#logo #path1', dur, { morphSVG: '#where #path1' }, 'endofblob-3') .to('#logo #path2', dur, { morphSVG: '#where #path2' }, 'endofblob-3') .to('#logo #path3', dur, { morphSVG: '#where #path3' }, 'endofblob-3') .to('#logo #path4', dur, { morphSVG: '#where #path4' }, 'endofblob-3') .to('#logo #path5', dur, { morphSVG: '#where #path5' }, 'endofblob-3') .addLabel('endofwhere', wordTiming) .to('#logo #path1', dur, { morphSVG: '#blob' }, 'endofwhere') .to('#logo #path2', dur, { morphSVG: '#blob' }, 'endofwhere') .to('#logo #path3', dur, { morphSVG: '#blob' }, 'endofwhere') .to('#logo #path4', dur, { morphSVG: '#blob' }, 'endofwhere') .to('#logo #path5', dur, { morphSVG: '#blob' }, 'endofwhere') .addLabel('endofblob-4', blobTiming) .to('#logo #path1', dur, { morphSVG: '#what #path1' }, 'endofblob-4') .to('#logo #path2', dur, { morphSVG: '#what #path2' }, 'endofblob-4') .to('#logo #path3', dur, { morphSVG: '#what #path3' }, 'endofblob-4') .to('#logo #path4', dur, { morphSVG: '#what #path4' }, 'endofblob-4') .to('#logo #path5', dur, { morphSVG: '#what #path4' }, 'endofblob-4') .addLabel('endofwhat', wordTiming) .to('#logo #path1', dur, { morphSVG: '#blob' }, 'endofwhat') .to('#logo #path2', dur, { morphSVG: '#blob' }, 'endofwhat') .to('#logo #path3', dur, { morphSVG: '#blob' }, 'endofwhat') .to('#logo #path4', dur, { morphSVG: '#blob' }, 'endofwhat') .to('#logo #path5', dur, { morphSVG: '#blob' }, 'endofwhat') .addLabel('endofblob-5', blobTiming) .to('#logo #path1', dur, { morphSVG: '#why #path1' }, 'endofblob-5') .to('#logo #path2', dur, { morphSVG: '#why #path2' }, 'endofblob-5') .to('#logo #path3', dur, { morphSVG: '#why #path3' }, 'endofblob-5') .to('#logo #path4', dur, { morphSVG: '#why #path1' }, 'endofblob-5') .to('#logo #path5', dur, { morphSVG: '#why #path2' }, 'endofblob-5') .addLabel('endofwhy', wordTiming) .to('#logo #path1', dur, { morphSVG: '#blob' }, 'endofwhy') .to('#logo #path2', dur, { morphSVG: '#blob' }, 'endofwhy') .to('#logo #path3', dur, { morphSVG: '#blob' }, 'endofwhy') .to('#logo #path4', dur, { morphSVG: '#blob' }, 'endofwhy') .to('#logo #path5', dur, { morphSVG: '#blob' }, 'endofwhy');