morphSVG gradients

[thomasJack 2 Likes (Newbie)]

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! 

[GSAP Helper 99 Likes (Contributor)]

I'm not quite sure what you mean. MorphSVG simply animates the "d" attribute of a <path>. It doesn't care what CSS you apply. 

Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• IMPORTANT: A minimal demo showing your attempt. If possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

[thomasJack 2 Likes (Newbie)]

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")

 

[thomasJack 2 Likes (Newbie)]

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

[thomasJack 2 Likes (Newbie)]

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;

// }

[thomasJack 2 Likes (Newbie)]

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

[Rodrigo 5,436 Likes (Superhero)]

Hi,

 

Do you have a minimal demo that we can take a look at? The information that you're providing right now doesn't really tell us a lot.

 

The only thing I could suggest is use linearGradient instead of linear-gradient. Also don't pass the parenthesis there as JS will expect a function named like that, which should be an invalid name also. Maybe something like this in your GSAP config:

to(morphDot, {morphSVG:dotPath, linearGradient: "(to bottom right, red, yellow)"}, "+=1")

I'm not an SVG expert so I can't guarantee that this will/should work, but is the GSAP approach I'd take.

 

Another option would be to create a class that immediately changes the gradient colors/directions and use a call method in the timeline to apply the class to a specific element:

https://greensock.com/docs/v3/GSAP/Timeline/call()

 

Hopefully this helps.

Happy Tweening!

[thomasJack 2 Likes (Newbie)]

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

[thomasJack 2 Likes (Newbie)]

See the Pen YzOpmOm by Paul-TG (@Paul-TG) on CodePen

[PointC 14,429 Likes (Superhero)]

I'm not quite sure what you need, but here are a couple other threads with gradient animations that may spark some ideas. Happy tweening.