Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'svg path'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 3 results

  1. 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; } };
  2. Hi, I have researched and tried various things but can't work out if there is a way to translate svg elements from 'absolute' coordinates? i.e. translate a bunch of svg elements all starting from the center, and finishing at their actual position So in the codepen, I would like to tween all the chickens from the black box to their actual positions ( on the black lines ) Currently, I put in the x,y value of the black box to tween from, but the chickens use this as a relative x,y I could work out the correct relative x,y value to tween from, but in the real project there are many elements that may change slightly Am I missing something obvious? Thanks
  3. Hello guys, I'm totally new to JS. Trying to learn and improve. I'm trying to build a minimap and move an object that represents player movements on the map. You'll see 2 things in the code. One is a straight line the other one is a map. I was only able to find animated movements. So When the user wants to move the object on the straight line with the mouse, also this movement has to be reflected for the object on the map too. I just want to be able to move that point with the mouse. How can i do it? Best Regards
×