asistapl

Thank you @Sahil! I solved it thanks to this thread: and it works even in Edge (with Path2d polyfill) so it's even better than svg version, because Edge doesn't support mix-blend-mode.

Hi, I have two problems with SVG version of this animation: 1. It's pretty slow when I have couple of similar animations morphing and blending on my site. 2. On Mac in Chrome and Safari (on Windows, Android and iOS works fine in every browser, on Mac works properly only in Firefox) colors are not blending to black which is a major problem for me and results in something like this: It should be all black not burgundy, sooo it ruins whole idea I'll file chrome bug later but I think that it maybe a good idea to convert it to canvas for performance and correct color blending. I've seen in figma which uses canvas that color blending works correctly there. I'm writing this because I have no idea how to convert it to canvas. If you have some suggestions how I should go about it, please let me know Thanks!

@OSUblake Thank you, this is exactly what I need!

Thanks, I was aware that plugin makes much more than just interpolation of values when tweening "d" attribute. Videos on your youtube channel explained that well

Thank you very much Sahil! Great solutions. For now I'll try to implement something like this: const obj = { d: "M1000,30.1V158H0V0c169.7,238.5,374.3-76,502.6,106.8C615.7,268.2,759.9-15.4,1000,30.1z" } TweenMax.to(obj, 1, { d: "M1000,157v1H0v-1h502.6H1000z", onUpdate: (v) => console.log(obj.d) }) It works great. I have relatively simple shapes to morph so I think I can make some modifications in Illustrator and use d attribute. For more complex paths I will use your first solution. Thanks, have a great day!

Hi, I want to get access to intermediate tween values when using morphSVG without actually animating anything. Is this possible? I tried something like this but it doesn't work.