Jump to content
Search Community

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

workwave test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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,


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

Link to comment
Share on other sites

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,


Link to comment
Share on other sites

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 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);
  //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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...