thomasJack

Im just wondering if any one has any pointers in recreating the diagonal movement of this photo wall div. Im assuming it skews it, but not sure.

this is awesome, any did any one figure out how to make the toolbar bkg expand with it?

awesome, thank you so so so much!!!!

I guess i should mention that the morph works, i just cant set the anchor points and have it do the morph rotationaly

Invalid property type set to rotational Missing plugin? gsap.registerPlugin() tl.to(waveAC, {morphSVG:waveA, type:"rotational", origin:"20% 0%", delay:0},"<")

does any one on the forum have any advice on morphing multiple paths at the same time?

Hello, is there a way to have multiple morphs happen at the same time?

https://codepen.io/Paul-TG/pen/YzOpmOm

I got super excited with your solution, but it was short lived as it didn't work, I commented out the function using it and left may solution, however I think I just have to stick to initial fill as it my solution takes away the beauty of morphSVG

Should mention, doing so directly in animation is kinky, it makes the whole svg disappear and then reaper, it doesn't look right

unfortunately, only the commented out version works as intended, and that's because onComplete() runs regardless of animation being completed, and onComplete runs as intended, so that's unfortunate!!!!! I can't pass any parameters, unless someone on the forum has any suggestions. function addGradient(gradient){ let gradientFill = gradient; let morphDot = document.getElementById("morphD1") morphDot.style.fill = gradientFill; } // function addGradient(){ // let gradientFill = "url(#linear-gradientGreen)"; // let morphDot = document.getElementById("morphD1") // morphDot.style.fill = gradientFill; // }

never mind, I set the property after animation and it looks fine!!! thank you!!!

Hi GSAP Helper, well it would be nice to do something like this: .to(morphDot, {morphSVG:dotPath, fill:var(--myGradient)}, "+=1") or alt .to(morphDot, {morphSVG:dotPath, linear-gradient(to bottom right, red, yellow)}, "+=1")

Sorry to bother, is there a way to use css in morphSVG aside from fill? for example a gradient linear-gradient(to bottom right, red, yellow)? Or alternatively to revert back to the svg with an @url? Thank you to any one in advance!

It all worked, thank you very much everyone. Tutorial videos should have those points though of including that in script, would have saved me much time but still appreciated