shy_seagull

Thank you Cassie, that’s good to know, so I can find an alternative solution to transforming!

Hi! I have this SVG path that should be fitted into its frame when it’s being resized. That is working fine when I use preserveAspectRatio="none" but now my question is if I can also rotate the path using MouseY and still contain its boundaries to that of it’s parent. The Path should never overflow it’s parent container, if that makes sense. The problem is I also want to morph the path at the same time using MouseX so I can’t rotate the path element itself but rather the group that is surrounding.

Thanks Jack, that solved it!

Hi there, I have multiple canvases in my project and all of them use the MorphSVGPlugin. For rendering to canvas I’m using this draw function: function draw(rawPath, target) { var l, segment, j, i; ctx.clearRect(0, 0, 5000, 5000); ctx.fillStyle = target.style.fill; ctx.beginPath(); for (j = 0; j < rawPath.length; j++) { segment = rawPath[j]; l = segment.length; ctx.moveTo(segment[0], segment[1]); for (i = 2; i < l; i+=6) { ctx.bezierCurveTo(segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5]); } if (segment.closed) { ctx.closePath(); } } ctx.fill("nonzero"); } Now that I have multiple ctx variables for the different canvases I would like to specify which ctx to use by passing 'heroCtx' for example to the render function as a parameter. gsap.to(shape1, { morphSVG: {shape: path2, render: draw, updateTarget: false } }) What would be the best way to do that? Thank you!

Thank you! With this it’s working now!

And yet another update. Sadly the same problem with the overlap appears when I try to do just that while using canvas. I suppose it has something to do with the filltype="evenodd"? https://codepen.io/lkssmnt-the-lessful/pen/xxRaYyL Here is the same shape in an inline svg producing different results and closing the negative space: https://codepen.io/lkssmnt-the-lessful/pen/GRNXQXw

Sorry, I take that back! It’s only Figma that does that. Illustrator closes off the shape! Very interesting though.

I’m afraid I have one more question. At first I thought you had just put all of the points of the closed shape on one straight line but it appears you have pushed them further. I checked putting it into this pen: https://codepen.io/lkssmnt-the-lessful/pen/dyOqdZZ Now when I push my points in Figma or Illustrator over each other they create these kind of shapes which produce holes again. These holes also appear when I put them in my gsap project. So we are still doing something a bit different I guess? I just can’t figure it out, sorry!

Craig, you are the best! For some reason I thought moving points to the same coordinates would glitch out the form, but that apparently had something to do with something else. Works like a charm now!

Thank you! Would there also be a way to animate the negative space instead of the positive? Right now I have one shape that looks like this (the shape is purple) but I think it might be easier to animate only the inner, negative shape and have another rectangle as the positive shape behind it. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip I tried to use these methods but couldn’t get it to work the other way around, meaning having a solid rectangle and subtracting an inner form from it. https://codepen.io/lkssmnt-the-lessful/pen/JjbaEpe

Thank you Zach! I would however like to do the opposite. To close the hole so to speak, so that the rectangular canvas covers everything. I hope that makes more sense now?

Hi there, I’m trying to use the MorphSVGPlugin to animate a mask that hides/reveals the html element behind it. For that I’m using canvas for performance reasons. I couldn’t really get a canvas clipping mask going so I just exported a subtracted shape from figma and used it as a single "evenodd" path. I am then morphing between those forms to change the hole/clipping area. There’s probably a better way to do this? Anyway what I really want to do now is also completely closing / opening that hole by morphing to a solid rectangle. Right now when I do this every point just zooms to the top right as it morphs, which makes sense, but I would love to have it open and close from the center as in scaling the hole/clipping area to 0 and back. I hope I made myself clear. Thank you!

Oh god, I guess you are right. Something else must’ve gone wrong the first time I tried. It works now!! I guess this is still the cleanest way to do it?

Hi there, I finally decided to shift to canvas based development for one of my project since the morphing of large inline-SVGs had a pretty nifty impact on performance. Trying to follow the documentation I just couldn’t get it working. In the examples like this one https://codepen.io/GreenSock/pen/WYWZab the author is using the path data of the SVG that is being rendered in the HTML. I however only want to use canvas and have the path data of the shapes stored as strings in the JavaScript file. I have taken the draw function from this example but am puzzled how my gsap.to() function should look like, since I don’t have an html path element on the page that I can reference. I realize the code in my codepen is utterly wrong, it’s just to demonstrate what I would like to do. Then I also found this https://codepen.io/osublake/pen/EZNMEZ which looks a lot easier but doesn’t work the same with GSAP 3 anymore. Thank you!

Thank you so much for that incredibly detailed response and explanation! As the client indeed needs these exact forms and the multiply mix-blend-mode to overlap them, I should probably look into canvas!