How to animated the background-linear-gradient without using css variables in timelines.

[Xenex122]

So basically most of the time I called the animation with global css variable to animate but I find something it could be break down by just calling the name similarly to sir @PointC what did in this codepen with clipPath  so I did something similary like background gradients in my code in a text and the code format is like this in the end part of javascript.
 

        tl1.to(".text h1",{
//           Here I want to animated the linear-gradient but it doesn't but I see some same define here at clip path so that's why I tried it but its covering the text. just comment out this background
          
            // "background": "linear-gradient(20deg, #FFFFFF 90%, #000000 10%, #FF792E 0%)",
            ease:"none",
            // stagger:1,
        })

when I put it in the scrollTrigger and you can see it also in my CSS which the code is like this. 
 

        .text h1 {
            width: 100%;
            padding: 15px;
            background: linear-gradient(110.25deg, #FFFFFF 34.09%, #000000 46.66%, #FF792E 54.27%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

but if I do that the  "-webkit-background-clip: text;", "-webkit-text-fill-color: transparent" is not working when I comment out the "background": "linear-gradient(20deg, #FFFFFF 90%, #000000 10%, #FF792E 0%)"

Here's the codepen.  

See the Pen ZErZagL by myth-vince (@myth-vince) on CodePen

See the Pen GRQxWdZ by PointC (@PointC) on CodePen

[GreenSock]

I read your question a few times and I'm still very confused. Maybe it's just because I'm super tired. But you'll significantly increase your chances of getting an answer if you simplify your codepen and as a very specific GSAP-related question. Remove everything you can from the CodePen that isn't absolutely essential to illustrating the problem. 

 

I'm guessing your problem is: 

// BAD:
background: "linear-gradient(20deg, #FFFFFF 90%, #000000 10%, #FF792E 0%)"

// GOOD:
backgroundImage: "linear-gradient(20deg, #FFFFFF 90%, #000000 10%, #FF792E 0%)"

because "background" refers to a bunch of background-related parts shoved together into one property, but you're just trying to animate the backgroundImage which isn't contaminated by all the extra data. 

[Xenex122]

yeah this is right thanks..take a rest sir hahaha..I thought  it is background not backgroundImage cause that's what I same i do in clipPAth but thanks a lot.