TimelineMax / morphSVG Code review

[c4rlyoungm4n]

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');

 

[ZachSaucier]

Hey Carl and welcome to the GreenSock forums! 

 

I have a couple of recommendations:

• Use functions, loops, and sub-timelines to generate code like this for you. For example you could create a function that outputs a timeline for each morph effect that goes to a blob then to the actual morph path that is provided in the function. Here's some psuedo-code for that (in GSAP 3 syntax):

  function makeMorph(elem, morphPath) {
    const tl = gsap.timeline();
    tl.to(elem, {duration: dur, morphSVG: "#blob"});
    tl.to(elem, {duration: dur, morphSVG: morphPath});
    return tl;
  }

  You can also use loops to go through each path per section.
   

• Use GSAP 3's timeline defaults to reduce the amount of code necessary and make it easier to maintain.

16 hours ago, c4rlyoungm4n said:

Is using a label the correct way to section the animation? 

Sure, it's a fine way. An alternative way would be to position each tween based on the previous tween (except the first one in each section). GSAP 3 has a new position value that makes that easy. It looks like you tried using them but didn't end up using them which is fine  

[c4rlyoungm4n]

On 3/16/2020 at 12:48 PM, ZachSaucier said:

Hey Carl and welcome to the GreenSock forums! 

 

I have a couple of recommendations:

• Use functions, loops, and sub-timelines to generate code like this for you. For example you could create a function that outputs a timeline for each morph effect that goes to a blob then to the actual morph path that is provided in the function. Here's some psuedo-code for that (in GSAP 3 syntax):

  
  function makeMorph(elem, morphPath) {
    const tl = gsap.timeline();
    tl.to(elem, {duration: dur, morphSVG: "#blob"});
    tl.to(elem, {duration: dur, morphSVG: morphPath});
    return tl;
  }

  You can also use loops to go through each path per section.
   

• Use GSAP 3's timeline defaults to reduce the amount of code necessary and make it easier to maintain.

Sure, it's a fine way. An alternative way would be to position each tween based on the previous tween (except the first one in each section). GSAP 3 has a new position value that makes that easy. It looks like you tried using them but didn't end up using them which is fine  

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