Jump to content


morphSVG gradients

Moderator Tag

Recommended Posts

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! 

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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")
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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;
// }
Link to comment
Share on other sites

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

Link to comment
Share on other sites



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:



Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. :) 


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.