Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Changing Gradient SVG

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

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.