Change linear gradient on SVG lines

[Mamat]

Hi,

 

I am very new on GSAP and I have some troubles in simple animation and timeline sequences

I would like to moove a line and then reverse the linear gradient color (instead of turning the color to red in the example) without getting this jerky effect on turning the color to another one.

 

I tried to create another linear gradient template in my SVG and reassign it to the line but it's not working 

 

If someone have some tips for me, I would be greatful

 

I guess there is already a topic on that but I can't find it

Sorry, i'm not very fluent in english ^^

 

Thanks a lot

Mamat

See the Pen MWYKrjY by MamatUseweb (@MamatUseweb) on CodePen

[ZachSaucier]

Hey Mamat and welcome to the forums! Your English is good.

 

When using a gradient fill like this, you have to animate the actual stop colors themselves. Since you're using a definition, you should animate that definition. I created a helper function to do this:

See the Pen GRgoyxw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Do note that this affects all elements that are using that same gradient. In order to prevent this, you'd need to have a new definition so that it doesn't affect other paths. 

[Mamat]

Hi Zach !

 

Awesome ! Thank you very much

Now I can moove forward and work hard to get my full timeline done  

 

Thanks a lot !

 

 

[Mamat]

Hmmmm ...
 

I have another question, since the timeline is "pre compiled" before running, is it possible to reassign the original linear gradient in another step of my timeline ?

 

Here are my steps to explain what I mean :

- Rotate the line

- Reverse the color

- Rotate the line back

- Reassign original linear gradient

- And restart ...

 

My point is : is the method modify the structure of the SVG ?

[ZachSaucier]

4 minutes ago, Mamat said:

Here are my steps to explain what I mean :

- Rotate the line

- Reverse the color

- Rotate the line back

- Reassign original linear gradient

- And restart ...

You can do this simply by adding more tweens to the timeline:

See the Pen PowZQmq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

5 minutes ago, Mamat said:

is the method modify the structure of the SVG ?

You can use your developer tools to investigate this and see that GSAP modifies the inline styles or attributes for the elements. For example it will set something like transform="matrix(1,0,0,1,0,0)" or style="transform-origin: 0px 0px;". Depending on your needs, you may need to save the initial values sometimes. But in your case, as seen above, you don't have to worry about that. 

[Mamat]

Thanks a lot !

 

I will investigate on that.

Thank you for all your help

[ZachSaucier]

@Mamat Note that I updated the pen just now to fix a logical error I had.

[Mamat]

@ZachSaucier you fix it before I even had the time to test it

 

Thank you.

 

I will fix my jerky effect on the timeline repeat and it will be perfect !