Some SVG Points Moves Before The Others

[Andrew Delaney]

Hey everyone!

 

So, this is my first time posting in the GSAP forums, as well as my first time posting in any coding forum at all, so I apologise if this is the wrong place for this kind of question. I am also veeeery new to GSAP.

 

So basically, I'm trying the get a blob SVG to change shape every time the user clicks a button. The animation mostly works, however there seem to be a couple points that won't adhere to the animation rules I set, and change their position immediately instead of waiting to move with the rest of it. I am using arrays containing the new SVG path coordinates to pass values into the animation cycle, and perhaps my code is a very roundabout way of creating what I want, but for the most part that doesn't seem to be the issue.

 

I have tried using a .fromTo() in case it was a problem with the initial point positions, and I have tried creating new SVGs making sure that I keep the same points to create the shapes, neither of which worked.

 

If anyone can let me know what the issue is I would really appreciate the help!

 

html:

<button onclick="bubbleSVG()">
  Blob
</button>

<svg width="50%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 900">
        <defs>
            <style>
                .cls-1{fill:url(#lg1);}.cls-2{fill:url(#lg2);}.cls-3{fill:url(#lg3);}.cls-4{fill:url(#lg4);}
            </style>
            <linearGradient id="lg1" x1="1728.025" y1="658.409" x2="1364.199" y2="294.583" gradientUnits="userSpaceOnUse">
                <stop offset="0" id="color1" stop-color="#55cdff"/>
                <stop offset="1" id="color2" stop-color="#6aff6f"/>
            </linearGradient>
            <linearGradient id="lg2" x1="1304.47" y1="310.036" x2="1197.59" y2="203.155" xlink:href="#lg1"/>
            <linearGradient id="lg3" x1="1652.485" y1="179.608" x2="1520.717" y2="47.839" xlink:href="#lg1"/>
            <linearGradient id="lg4" x1="1381.572" y1="117.848" x2="1339.908" y2="76.184" xlink:href="#lg1"/>
        </defs>
        <g id="Bubbles1">
            <path id="b1" class="cls-1" d="M1259,418c52.4-92.8,234-260,422-250,165.841,8.821,168,384,13,524-148.573,134.2-347,79-415-3S1211,503,1259,418Z"/>
            <path id="b2" class="cls-2" d="M1165,309c21.061,54.758,84,32,124,9s78-72,61-103-49-50-88-50S1140,244,1165,309Z"/>
            <path id="b3" class="cls-3" d="M1583,49c100.579-15.646,155-1,145,51-5.1,26.532-59,13-126,33-70.6,21.076-91,57-145,32S1493,63,1583,49Z"/>
            <path id="b4" class="cls-4" d="M1353,73c-35.308,7.305-29,38-5,46s39-1,43-15S1382,67,1353,73Z"/>
        </g>
    </svg>

javascript:

var BlobColor1 = ["#f28500","#030087","#0079ce","#ce49ff"];
var BlobColor2 = ["#ffb300","#001eb3","#00d9f9","#f971ff"];

var Blob1 = ["M1259,418c52.4-92.8,234-260,422-250,165.841,8.821,168,384,13,524-148.573,134.2-347,79-415-3S1211,503,1259,418Z","M1309,230c52.4-92.8,246.729-119.071,363,29,117,149,199.915,385.763-7,460-131,47-138.669-35.119-192-220C1428,343,1261,315,1309,230Z","M1305,216c115.142-183.181,489-137,348,89-100.279,160.73,241.217,149.425,82,301-125,119-347,146-455,29C1169.874,515.7,1195,391,1305,216Z","M1180,389c27.432-214.617,89.781-84.552,345-218,306-160,398,335,282,547-82.843,151.4-303-9-411-126C1285.874,472.7,1163,522,1180,389Z"];
var Blob2 = ["M1165,309c21.061,54.758,84,32,124,9s78-72,61-103-49-50-88-50S1140,244,1165,309Z","M1309,581c21.061,54.758,88,64,128,41s-9-94-26-125-49-50-88-50S1284,516,1309,581Z","M1561,794c21.061,54.758,149,18,240-34,104.838-59.908,58.919-85.024,25-95-51-15-87.395.807-165,36C1575,740,1536,729,1561,794Z","M1755,164c34,23,73.208,32.127,100-12,17-28-11.162-57.01-34-84-22-26-67.2-39.09-90,0C1703,116,1731.986,148.432,1755,164Z"];
var Blob3 = ["M1583,49c100.579-15.646,155-1,145,51-5.1,26.532-59,13-126,33-70.6,21.076-91,57-145,32S1493,63,1583,49Z","M1767,163c81,69,127.446,142.778,45,149-53,4-46-21-97-82-26.694-31.928-118.783-64.3-109-123C1615,53,1697.664,103.936,1767,163Z","M1814,286c13,58,46.62,92.25,27,116-19,23-65,66-116,5-26.694-31.928-38.441-62.305-15-117C1737,227,1805.241,246.92,1814,286Z","M1495,97c-5.635,59.171-68.738,39.864-130,95-50,45-111,44-120-6-9.771-54.282,87.559-15.305,111-70C1383,53,1501,34,1495,97Z"];
var Blob4 = ["M1353,73c-35.308,7.305-29,38-5,46s39-1,43-15S1382,67,1353,73Z","M1249,346c-35.308,7.305-33.51,53.684-12,67,21,13,72,2,76-12S1278,340,1249,346Z","M1239,95c-35.308,7.305-15.51,71.684,6,85,21,13,80-7,84-39C1333.246,107.03,1268,89,1239,95Z","M1252,571c-35.308,7.3-15.51,71.684,6,85,21,13,80-7,84-39C1346.246,583.03,1281,565,1252,571Z"];

var counter = 1;

function bubbleSVG() {
  console.log(counter);
  TweenMax.to("#color1", 1, {
    stopColor: BlobColor1[counter],
    ease: Expo.easeOut,
  })

  TweenMax.to("#color2", 1, {
    stopColor: BlobColor2[counter],
    ease: Expo.easeOut,
  })

  TweenMax.to("#b1", 1, {
    attr: {d: Blob1[counter]},
    ease: Elastic.easeInOut,
  })

  TweenMax.to("#b2", 1, {
    attr: {d: Blob2[counter]},
    ease: Elastic.easeInOut,
  })

  TweenMax.to("#b3", 1, {
    attr: {d: Blob3[counter]},
    ease: Elastic.easeInOut,
  })

  TweenMax.to("#b4", 1, {
    attr: {d: Blob4[counter]},
    ease: Elastic.easeInOut,
  })

  counter += 1;

  if (counter > 3) {
    counter = 0;
  }
};

 

See the Pen bGGLdxv by AndrewDelaney (@AndrewDelaney) on CodePen

[GreenSock]

Welcome to the forums, @Andrew Delaney! You're gonna like it around here.

 

It looks like the problem is that you're trying to animate the "d" attribute with values that contain mis-matched numbers of points. As a simple example, imagine animating a triangle (3 anchor points) into a square (4 anchor points). When you give two raw string values to GSAP and tell it to animate between them, it will literally go through the strings and isolate the numbers and animate between those (the first number in the starting string animates to the first number in the ending string, etc.). But when you have mis-matched quantities of numbers, that ain't gonna work right. 

 

This is exactly why MorphSVGPlugin is so valuable - it can do all the extra work of converting the starting/ending path data into cubic beziers, fabricate points where necessary to ensure there are no mis-matches, and animate them smoothly. Here's a forked version of your demo using MorphSVGPlugin: 

See the Pen eb652c25a994be63660e27aa49875d3d?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better, right? 

 

MorphSVGPlugin is a bonus plugin for "Shockingly Green" and "Business Green" Club GreenSock members. You can try it out on codepen as much as you want for free (the version in the codepen demos only works on the codepen domain, but when you sign up for Club GreenSock, you get a full copy that'll work anywhere). Here's a list of all the codepen-safe bonus plugins: 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

Sign up if/when you're ready: https://greensock.com/club/ 

 

Does that help? 

[Andrew Delaney]

Ah, I was worried that it was because of that ?

 

Thank you for getting back to me so fast!

I did read up on the MorphSVG, and it looks incredibly useful. Once I've graduated and actually start working I will really consider becoming a member.

[GreenSock]

No problem! Also, we do offer educational discounts for students, so just shoot us a private message or email if you're interested and we'll hook you up. But there's no rush - enjoy the tools!