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.

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; } };