Jump to content


Changing Gradient SVG

Go to solution Solved by Diaco,

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

Hello guys how are you there ? 

I'm quite new at Greensock because I started learning it on Saturday. But I did practices a lot and now I want to use it for my own project. But here I have a problem, that's why I come here to ask you some help !  :-P 

I'm working with an SVG file and I try to animate some of my drawings on the webpage, but, I drew a background  with a gradient and i wanted to change it with a transition in greensock (TweenMax etc..). 


I could maybe do it with javascript only (wich I used to practice with a background of only one color, changing in function of the computer time), but i wanted to use Greensock's stuff. If I want to change this gradient, it's only to make it change in fonction of time with transition so that between 5am - 8am you've got dark blue on the bottom and red-orange nuances on the top, for example.


I hope that I well explained my problem. Sorry for some English mistakes, I'm a french student in webdev. ! Have a nice day / night / evening ..  :-P

Link to comment
Share on other sites

  • Solution

Hi Maxdrum  :)



pls for next time make a reduce Codepen Demo available .


and pls check this out : 

See the Pen MwbRoL by MAW (@MAW) on CodePen

  • Like 3
Link to comment
Share on other sites

Wow, Diaco. You keep amazing me. Nice work. Didn't even know about that.

  • Like 1
Link to comment
Share on other sites

Thanks a lot Diaco it works :-P  ! 

I was not far of the solution, but here, if I understand well your code, you're editing the string value, isn't it ? Stopcolor is not an attribute in this case ? 

I ask you this because i was trying to edit this value with the attribute plugin of Greensock ... 

Sorry for Codepen, i'll check it next time ! 

Have a nice day everyone  :-P

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