Looking for a more efficient / shorter way to have multiple elements morph with one trigger

[workwave]

I'm trying to come up with a "better" way to write these morphSVG animations. The issue is that I have about 100+ paths I want to animated all at once. Everything works fine but I'm assuming there must be a more efficient way to do this, maybe with some sort of loop and an array? Then a function that gets called each time it loops? 

 

As of right now my project has like 2000 lines of JavaScript and I'm not even finished!

 

In the codepenn you will find a small example with six different elements I'm morphing at the same trigger point. 

 

Thanks in advance and have a great day everyone! 

 

Kind regards,

-Bruno

See the Pen yaBBPy by bruno-gomes (@bruno-gomes) on CodePen

[PointC]

Hi workwave 

 

If you want to morph a lot of paths at one time, you can easily loop though them and make that happen. I made a pen a few months ago to demonstrate that possibility. It may prove useful to you.

 

See the Pen LNLpgB by PointC (@PointC) on CodePen

 

Hopefully that helps a little bit.

 

Happy morphing.

[workwave]

Hi workwave 

 

If you want to morph a lot of paths at one time, you can easily loop though them and make that happen. I made a pen a few months ago to demonstrate that possibility. It may prove useful to you.

 

See the Pen LNLpgB by PointC (@PointC) on CodePen

 

Hopefully that helps a little bit.

 

Happy morphing.

 

Hey PointC!

 

Thanks for the demo! It did help me get all the paths morphing done in a shorter way.

 

However, I'm having an issue tying it to the scrollmagic scene. When I add it to the scene, the last path works properly but the ones before it don't. They run automatically instead of morphing with the scrolling.

 

Here is a code penn with an example:

 

See the Pen NRKpjw by bruno-gomes (@bruno-gomes) on CodePen

 

Let me know if you have any clues on why is that =]

 

Kind regards,

-Bruno

[PointC]

Hey Bruno,

 

Is this what you need it to do?

 

See the Pen WGZXdx by PointC (@PointC) on CodePen

 

Hopefully I understood your desired outcome correctly.

 

Happy morphing.

[workwave]

Hey Bruno,

 

Is this what you need it to do?

 

See the Pen WGZXdx by PointC (@PointC) on CodePen

 

Hopefully I understood your desired outcome correctly.

 

Happy morphing.

 

That was perfect ^.^ exactly what I needed to make it work!!

 

Here is the final code:

(function(){
  function sceneHelper(sectionA, sectionB, sectionC) {
    var stage;
    var master = new TimelineMax();
    var scrollMagicController = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({
      triggerElement: sectionA,
      duration: '100%',
      triggerHook: 1
    });
    for (i = 0; i < 6; i++) {
      stage = TweenMax.to(sectionB + i, 1, {morphSVG: sectionC + i, ease:Linear.easeNone});
      master.add(stage, 0);
    }
    scene.setTween(master).addTo(scrollMagicController);
    scene.addIndicators();
  }
  //Call scene helper for each item
  if (typeof ScrollMagic !== 'undefined') {
  sceneHelper('#section1', '#sectionZero', '#sectionOne');
  sceneHelper('#section2', '#sectionZero', '#sectionTwo');
  sceneHelper('#section3', '#sectionZero', '#sectionThree');
  sceneHelper('#section4', '#sectionZero', '#sectionFour');
  sceneHelper('#section5', '#sectionZero', '#sectionFive');
  sceneHelper('#section6', '#sectionZero', '#sectionSix');
  sceneHelper('#section7', '#sectionZero', '#sectionSeven');
  }
})();

See the Pen BLBvJk by bruno-gomes (@bruno-gomes) on CodePen

 

 

Working perfectly thanks a bunch PointC!