Jump to content
Search Community

morphSVG gradients

thomasJack test
Moderator Tag

Recommended Posts

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

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

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!

  • Like 1
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.
×
×
  • Create New...