gsap radial gradient animation

[S.AM]

Hi Guys,

 

New here, gsap library is amazing!!! Just playing around the scrolltrigger and gsap animation on codepen, had this very weird radial gradient animation, not sure if it's related to gsap lib or css gradient, also not sure if I can explain the issue I have encountered well, but below are some info and if anyone had any idea what's happen here and point me to the right direction that'd be appreciated. (Please don't judge me on the color selection, just testing) 😂

 

What am i trying to create

Kind of like eclipse reveal effect. from nothing to half circle with gradient

codepen example: 

 

What it end up produce

Somehow sometime the color seems reversed. see attached screenshot. (This happens when you reload the page sometime, but when you edit the code and save again, it looks fine, i am not sure if i am crazy or something, it just weird 😂

 

Thanks!

Sam

 

 

 

See the Pen QWQKYmX by anonymous-s (@anonymous-s) on CodePen

[mvaneijgen]

I've looked at your demo and I never saw anything like your screen shot. 

 

I did add a few tweaks to your animation. Instead of animating the whole `background` object I've moved it to only the gradient part with `background

image` (`backgroundImage`), because just `background` is a short hand for a lot of properties (see MDN docs). Also I change the second color to just `transparent`, don't know if that will change anything.

 

See the Pen wvyzOyK?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

[S.AM]

Hi Mitchel,

 

Thanks for your pro tip. I think that might've been the issue that I have encounter, by comparing / test with background and background-image codepen example, I can no longer reproduce the werid gradient issue on your example with background-image. But still exist on mine one sometimes. Must be how 'background' property works I guess. Anyways, thanks for your help. Saved my day 😃

 

Sam