Animating linear gradients with greensock

[Zannen]

I managed to get it working!

I talked to a friend of mine and i ditched the infinite loop idea in favour of calling a function on each click. I have a counter that represents the images and i have it reset after i go through all the images!

Woohoo, now all i need is some prep to use the whole images and ill come back here with a link to see what you think.

Thanks a bunch for all the information and inspiration!

 

EDIT:

 

In case you want to take a peak at the small version. 

See the Pen gwpZyk?editors=1010 by anon (@anon) on CodePen

 

[Jonathan]

Glad you got it sorted Zannen

[Zannen]

Hey, its me again.

 

I finally became a member after trying stuff out and making a script to equalize all the paths, linearGradients and stop tags across all of documents.

And as i was setting up things i have run across some problems. For instance, after adding everything to a html document and modifying it so it works i can't get it to animate gradients.

 

So i have the same code that i have on this link: 

See the Pen gwpZyk?editors=1010 by anon (@anon) on CodePen

  , but only on a larger scale. In my document my SVG-s consist of around 650 paths and gradients.

 

The animation on all the paths work, but the gradients don't change. They are all in the same color(black), not even the start one.

 

Do you have any thoughts on what might be wrong?

I can't put it on codepen since codepen is really slow due to a lot of data.

[Dipscom]

I can understand the reason to not put it all in a codepen.

 

From the top of my head, if the only colour you are seeing is black it is because the linkage from the element to the gradient is broken or is breaking when you try to animate.

 

What happens if you remove the code for he animation? Do you see any gradient? Do you see any gradient at all with just the SVG? Is this example pen setup in the exact same manner? 

 

From looking at the pen, I see many gradients being defined, do you need them all? What happens if you set just one gradient to all shapes?

 

I mean, it's very hard to extrapolate what exactly is causing it, the only thing I can tell you for certain is that black is the colour you will see if no color/gradient is defined in a SVG.

[Zannen]

Thanks for the input, i checked a couple of stuff and it really is the little part with the Stagger.to. Without it i animate through all the paths with the same gradient. I will look into it more closely, but thank you, i was stressed out and couldnt figure it out alone at the moment.

[Dipscom]

Ok, if you can pinpoint that to the .staggerTo(), that's a good start. I do think that there is something not quite right there because when clicking to make the animation cycle, a couple of the times the first tween jumps, other times it doesn't.

 

Definitely something fishy with that bit. I can't go over your code right now and double check but, try focusing on how you are building that stagger.

[Zannen]

Ok, well, i figured it out. In my own document the stop-color was actually defined as style="stop-color:#BLABLA" instead of stop-color="#BLABLA" which in turn resulted in NAN filling the lists i use to cycle through for staggerTo.

 

But now i have another question. Is it possible i messed up the staggerTo while animating? Im asking this because when everything animates, including the gradients i do not get the exact same colors. It seems as if the colors are messed up a bit except from the starting image which is fine.

 

 

 

EDIT: I'll try to put up the whole thing along with the links to the svg images to see what i expect after each animation tomorrow.

If anyone will have time i would like to hear your thoughts on it.

[Zannen]

I wasnt able to put it online right away but here it is.

This is the link for the animation:  http://animacija.lg-studioir.hr/

 

These are the link to the original SVG's in order of animating:  

https://www.dropbox.com/s/fn065jc1722t4no/obradeno_capt_am_gotovo%20-%20path%20%28inkscape%29.svg?dl=0

 

https://www.dropbox.com/s/g074hmlxcnjvesz/obradeno_hulk_gotovo%20-%20path%20%28inkscape%29.svg?dl=0

 

https://www.dropbox.com/s/4uucckh7dur04nq/obradeno_iron_man_gotovo%20-%20path%20%28inkscape%29.svg?dl=0

 

 

I have 2 issues im currently strugling. One is that it is really slow. Two, my gradients aren't animating the way they should be.

 

I think it is slow because i am in the gradient for loop for far too long, and also each time i am calculating a random nubmer for each little polygon so they have different speeds. But i am not sure.

 

Also, i'm not sure why the gradients won't animate correctly. I used the staggerTo and it seemed to work. On that note is it better to use stop-color defined in hex or rgb notation?

 

 

 

If anyone finds the time feel free to give any critic, ideas, help. I am open to everything.

In the meantime i'm going to try to figure stuff ot on my own.

 

EDIT: forgot to mention, you can switch animations on click.

[Dipscom]

Hey Zannen,

 

I had a look into your page but can't see what is it that you mean when you say your gradients don't animate the way they should be. There's just no reference point as to 'what they should be'. What browser are you using? I have looked with Safari, FireFox and Chrome in a Mac. I see all characters with gradients just fine.

 

I've opened you page in a new window and did some profiling. The story the devTools is telling me is that you are cycling through too many things on click then, you seem to be trying to tween a ton of things in one go without using the best tool for the job.

 

SVG, as cool as it might be, is not your best call if you want to create shaded polygons. You'll be better off using WebGL, better yet, something like ThreeJS.

 

The browser can't handle calculating all of those morphing SVG shapes you have flying around and all of the (possibly) hundreds of gradients you have defined there.

 

If you really, really, really want to push with this demo, you will need to scale your operation way down first. Try something with half a dozen polygon shapes and half as many gradients. Then, check performance. If it's ok, scale up. Rinse and repeat.

[Zannen]

Did you also check the images i am trying to morph to? (I tested it on chrome)

The hulk in the dropbox one doesnt look the same as the one on the page (the drop box images are what they should morph into) . So im thinking that i messed up what should Stagger to what.

 

On the note that i am doing too many things i am aware of that. I am thinking of preprocess all the things that are not needed in the animation directly. For instance make lists of stop-color and offsets before i even start the animation.

Also lowering the amount of gradient stop tags so it doesnt change the look of the gradient but just to lower the amount of points it has.

 

I was looking at greensock performance test and was hoping i could achieve a smooth looking animation with it, since i didn't have luck with the other libraries i tried.

 

Another idea is to seperate the animation so i animate lets say half or third part of it first, to seperate them in some sort of groups so they don't all animate at the same time. But im not sure how to pull of a cool looking animation out of it at the moment.

 

I will try the first idea first, don't know if that will help, but that way i won't have any unnecessary operations after the click, so it might be smoother. Just moving the random function i have in the code and setting fixed value speeds it up.

[OSUblake]

I have to agree with @Dipscom here. This type of animation is not suitable for SVG. Even if you had no gradients, it would most likely still run slow. For most animations, SVG will be the slowest renderer. SVG < HTML <= Canvas < WebGL.

 

WebGL can handle this type of stuff without breaking a sweat. Check out this demo using GSAP and Three.js

See the Pen PNXbGo by zadvorsky (@zadvorsky) on CodePen

 

You can still use SVG, you just can't animate it directly. It needs to be converted into geometry that can be used by WebGL. Here's a good article on rendering SVG in WebGL.

https://css-tricks.com/rendering-svg-paths-in-webgl/

 

And a simple demo morphing icons.

http://mattdesl.github.io/svg-mesh-3d/

[Zannen]

Thanks for all the comments and info. I will look into all your suggestions and come up with something.