Jump to content
GreenSock

Zannen

Animating linear gradients with greensock

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

let me start from the beggining. I have a project i wanted to do with SVG and after trying lots of stuff, i found GreenSock to be the best bet and am trying it out on codepen before, maybe if it fits my needs get the licence.

Anyhow on to the problem.

 

I am trying out gsap on codepen and was trying to morph one svg into another. I have 2 svg pictures. One hidden, one visible. I am using the other as reference to where the first one needs to morph, because later, there might be more svg's involved in the animation.

 

So, i succeded into morphing the polygons in the svg's ( converted them into paths first ). But i am having problems with animating the gradients. I presumed that both gradients have to have the same number of <stop> tags. Also wanted to animate both the offset and the stop-color. I read about it on one of this forum's posts, that you can do it with .staggerTo and cycle, but i cant seem to get it...

 

I tried to find all the stop tags inside each of the linearGradients i am looping through and then animating each of the offsets and stop-colors but i can't make it to work...

 

Any idea, or maybe a more easier way to do it would be helpfull. I am still kinda inexperienced with all the syntax and functions so if you can point me in the right direction or offer any assistance i would be really greatfull.

 

Right now on the codepen link i have the animation of the polygons, but no changing of gradients.

Thanks in advance.

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

Link to comment
Share on other sites

Hi Zannen  :)

 

Welcome to the forums.

 

I took a look at your pen, but saw some errors so you may still be working on that? Anyway, Jonathan has posted some great information about animating a gradient here:

 

http://greensock.com/forums/topic/13685-morphsvg-animating-gradient-assets/

 

You also asked about an easier way to do this. Depending on your needs, you may be able to fake the transition.

 

You could do that by adding the desired ending gradient to your end path and the desired starting gradient to your start path. Make sure your end path(s) are above your start path(s) and hidden via the CSS. Then you simply morph your start path into the end path. When the morph ends, you tween the autoAlpha of the end path up to 1. Since the start path is now the same shape and position as the end, it looks like the gradient is actually shifting. It's a cheat, but it's simple and may work for you.

 

Here's a simple CodePen with that possibility.

 

See the Pen XdBvEB by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

  • Like 2
Link to comment
Share on other sites

Hello Zannen,

 

Here are examples of animating CSS gradients with GSAP:

 

Here is an example of a cross browser linear-gradient tween

 

See the Pen vJwzD by jonathan (@jonathan) on CodePen

 

And here is a cross browser radial-gradient tween:

 

See the Pen BeJwd by jonathan (@jonathan) on CodePen

 

Regarding the proper syntax you can have a look at the resource links below.

 

Resources:

MDN Using Gradients: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

MDN Linear Gradients: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

MDN Radial Gradients: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient

CSS Tricks Gradients: https://css-tricks.com/css3-gradients/

 

Happy Tweening! :)

  • Like 4
Link to comment
Share on other sites

Thanks in advance i'll look into it. Before i start with the questions ill research the links and give it a go. Yes i am still working on it. I know there is a lot of needless information, both in the svg and the js part, but its a work in progress. I was testing somet things out. Will get back at you soonish!

 

I am trying make the gradient change as the polygons move, to get an effect like it is changing during the mevement. But will see what i can do.

Link to comment
Share on other sites

The above examples animated CSS gradients.

 

Here are some examples animating SVG gradients using GSAP:

 

Animating an SVG linear gradient with GSAP

 

See the Pen mPGrRN by jonathan (@jonathan) on CodePen

 

Animating an SVG radial gradient with GSAP

 

See the Pen ZWKmrK by jonathan (@jonathan) on CodePen

 

Basically i am using a staggerTo() tween which can take advantage of the special cycle property. Learn more about that here:

 

http://greensock.com/gsap-1-18-0

 

:)

  • Like 2
Link to comment
Share on other sites

I am trying make the gradient change as the polygons move, to get an effect like it is changing during the mevement. 

 

I thought that's probably what you were trying to do, but thought I'd throw my little 'cheat' out there anyway. Good luck with your project.

Link to comment
Share on other sites

So, let me just check my logic a little bit here. What i want is to somehow, get the offset and the stop-color from each gradient and store them in arrays. I thought maybe extracting it somehow via queryselectorAll or silimilar way. Then using the staggerTo to position myself inside each of the linear gradients and then using the extracted offsets and stop-colors with cycle, to cycle through and animate all the gradients.

 

Is that a good way of thinking? Or am i complicating things?

Because im having trouble separating and getting just the specific values in their own arrays. But that is probably due to my inexperience.  :oops:

Maybe i just need to sleep on it.

Link to comment
Share on other sites

Hey,

I have been working on my tweening for a while now, and i managed to get something done. 

But i was wondering, if anyone can look at my code and tell me why the gradient isnt changing?

It was suppose to change from white to green.

And i cannot find any errors in my code, but still nothing is happening...am i missing something?

 

The codepen is the same as the link on the first post but here it is anyway.

 

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

Link to comment
Share on other sites

Hey,

In case someone takes a look at this, i made another link with so much less code to be easly read and added comments in the JS section for a bit of easy understanding.

 

The code is written this way because i intend to use a lot of paths and gradients, and even more groups. But for now i want to figure out why my gradient isnt animating. It should animate in the same time period as the movement. And in this case it should start changing from color white to color green.

 

Here is the simplified codepen:  

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

 

 

Thanks in advance if anyone can offer any help or insight.

Link to comment
Share on other sites

Hello Zannen,

 

Thank you for reducing your codepen example ;)

 

It looks like you are missing the hashtag symbol # in your staggerTo() tweens target string concatenation.

 

See the Pen RaEKKo?editors=1010 by jonathan (@jonathan) on CodePen


 

'#' + amergradient[index].id + ' stop'

So look at the following:

// change what you currently have:
TweenMax.staggerTo(amergradient[index].id + ' stop', randomTime, {

// to this with the hashtag # for your id to work
TweenMax.staggerTo('#' + amergradient[index].id + ' stop', randomTime, {

:)

  • Like 2
Link to comment
Share on other sites

Thanks a bunch!

Wow...i can't believe i missed that...

 

Ok, gonna try to work with that on a larger scale!

Thanks again!

  • Like 2
Link to comment
Share on other sites

No worries glad to help! :)

Link to comment
Share on other sites

Hey,

its me again. Not sure if i should open another thread, but im gonna ask here still anyway. I know that morphing can be chained. I saw in the examples.

But can it be done in a manner that nothing morphs until you click the screen or a certain part of the screen, and if i have more morphs chained one after another, how would one go about chaingin them in a way that each one starts only when you click with a mouse?

 

Are there any examples out there concerning this particular topic?

Link to comment
Share on other sites

You would just have to add event handlers through javascript. When it is clicked it will trigger the callback function to run your tweens.

 

You can just setup your tweens into a timeline using TimelineMax or TimelineLite. And then you can just play() the timeline when the click handler is triggered.

 

Do you have a codepen example of what your trying to trigger on a click event?

 

:)

Link to comment
Share on other sites

Not yet, but im working on it!. :D

I was trying out my previous codepen examples on a larger scale and it worked with no problem, so im looking into chaining now, since for my project i will have more svg groups i want to tween between.

I will come back and post a link if i get stuck when i manage to modify my code. Thanks! :)

Link to comment
Share on other sites

Here are some video tuts on how to sequence your tweens. And how to convert your tweens into a timeline. A timeline will give you greater control for more complex animations.

 

 

And this:

 

 

:)

  • Like 1
Link to comment
Share on other sites

Thanks a lot! :)

When im done with the whole animation im definitly posting it somewhere to show off! :D

Link to comment
Share on other sites

Oh, hello again. I have another question regarding gradients. So in the first link waaay up above i managed to morph the gradients neatly. But, i was using the same amount of 'stop' tags. Is there a way to morph, or animate linear gradients similar to morphsvg, so it does it correctly even though there arent the same number of 'stop' tags in both groups i am morphing. 

Or do i have to manually add 'dummy' stop tags to either the destination or the starting linear gradient to make them the same number so they can map into each other accordingly?

Link to comment
Share on other sites

As far as I know there is no clean way to animate between gradients with different numbers of stops. GSAP does not accommodate that currently.

Link to comment
Share on other sites

ok, thanks, ill keep that in mind

Link to comment
Share on other sites

  • 3 months later...

Hello!

Its me again!

I haven't really been free to do any animating so im back to continue my work and ask you folks a couple of more questions.

 

First of all is, is it wrong to make an infinite loop to make the animating process infinite?

Second, is there an easier way to do it then i already have?

And Third, what am i doing wrong? :D

 

I was thinking of making an infinite loop through all my svg images, and wait for a click input or similar between the loops, but after the animation finishes. And then i would get a continues infinite animation that continues with a click.

 

Here is the link with a summary and some comments and explanations.

If anyone is free to check it out i would like to hear your comments.

Also, it is set on a small example of 3 SVG images so far and each has 10 paths and gradients.

I am going to use larger SVG images on my real work, about 650 paths and gradients at least in each image.

 

Thanks in advance.

 

Link:

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

Link to comment
Share on other sites

Hello Zannen,

 

First of all is, is it wrong to make an infinite loop to make the animating process infinite?

No you can make infinite loop, nothing wrong with that

 

Second, is there an easier way to do it then i already have?

The cycle property along with a stagger tween is the best way as far as i know of to animate a SVG gradient using stopColor.. you can see a simplified version here of that:

See the Pen WraOVy by jonathan (@jonathan) on CodePen

 

And Third, what am i doing wrong?

I'm a little confused on your specific question and what the desired end result should be

 

Maybe others can see what your intent is. Any additional info will be highly appreciated. Thanks!

Link to comment
Share on other sites

I didn't have time to dig into all the code in detail, but it looks like you're trying to animate the attributes of <stop> elements, right? Thus you should use the AttrPlugin (meaning your tween would use attr:{"stop-color":"#ff0000"} for example). Does that help at all? 

  • Like 1
Link to comment
Share on other sites

Yeah, ummm..maybe i should have explained a bit more in detail. I managed to get the gradient and the animation working. I did testing if the gradient and the movement itself would animate and it does (but i tested it on 2 SVG images only). Right now it seems to me since i have a loop i can only see the animation between the first SVG image and the last one ( i reckon its probably because i don't have a pause between animations in the loop? ), and im trying to pause the loop somehow to see if it actually animates through all the SVG images.

 

My question is, is there probably an easier way of doing it?

 

Because i have a feeling i am complicating things a bit too much.

 

Like i said in the beggining, i had an idea to make an infinite loop to make the animation continues. In that loop i wanted to extract and setup everything in variables and then use that in the animation. Since for instance i do not know how many <stop> elements i have in each gradient, i made it dynamic so it counts them every time and animates them with the same <linearGradient> of the other point.

Even though i don't have the same number of <stop> tags in each <linearGradient> they are equal in the other SVG images. I also do not know how many SVG images i will have so i wanted to make that part dynamic as well.

 

Example on the <stop> tags. There is an equal number of <stop> tags in SVG 1 image in linearGradient 5 and SVG 2 image in linearGradient 5, but no the same in SVG 1 image linearGradient 5 and SVG 1 image in linearGradient 6.

Thats why in the last mini-loop i have before animating i am putting the stop information in a variable and using it like that to animate it.

 

I used Stagger tween like Jonathan mentioned. I will look into AttriPlugin to see what it is all about. 

I just wanna know if this is the right way to deal with this kind of idea.

Im trying to get better at animating and programming so i want to do it right, but i have a feeling im just overcomplicating things. :)

 

I was also thinking of making a mini program to check through all the SVG's and <stop> tags before anything happens, count the maximums from all the SVG images then add some <stop> tags and <path> tags that wouldnt change how the SVG images look except make the number of those tags equal across all the SVG images.

What do you think about this idea too?

 

I know you are all busy people, so i apologize in advance if im asking a bit much.

But thank you for all the help so far i really appriciated!

Wouldn't make it so far without your suggestions. :)

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.
×