Combining linear gradient + url on css background image

[semplicelabs]

Hi Team GreenSock,

 

i hope i don't missed it anywhere but is it possible to combine both a linear gradient and a url on a background image? So many great effects would be possible (especially if you pin+reveal a cover image with a gradient for example).

 

A normal linear gradient on the 'backgroundImage' works great with GSAP but i can't achieve it together with an image url like this:

 

gsap.to('.cover',{
  backgroundImage: 'linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(236,221,180,1) 100%), url(https://i.ibb.co/XCKK68q/codepen.jpg)'
});

Iam also open to any tricks on how to achieve it even when its not build in natively. Only thing i have to avoid is to use 2 different elements.

 

Thanks a lot for any help!

 

Best,

mike

See the Pen vYKXRaM by paperboy (@paperboy) on CodePen

[ZachSaucier]

Your pen there is working... The background image animates from the one in the CSS to the target one. Look in your dev tools to see for yourself.

[semplicelabs]

Hi Zach,

 

thank you for the fast answer.

 

Sorry that was my bad, on my local install iam using scrollTrigger with a timeline and i had an syntax error in the initial value for the backgroundImage which gets created programmatically. I should have payed attention to the example codepen. At least it works great now, sorry again for the waste of time!

 

Best,

mike