background color change when translateX

[aryaaaarmdn]

section#about div.about__content div.education ul li,
section#about div.about__content div.experience ul li {
    position: relative;
    padding: .5em;
    margin-bottom: 1em;
    width: 100%;
    background-color: var(--body-color);
}

section#about div.about__content div.education ul li::before,
section#about div.about__content div.education ul li::after,
section#about div.about__content div.experience ul li::before,
section#about div.about__content div.experience ul li::after 
{
    filter: blur(2px);
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(235deg, #43d8c9, #95389e);
    z-index: -1;
}

let eduContainer = document.querySelector("div.education");

gsap.timeline({
    scrollTrigger: {
        trigger: eduContainer,
        toggleActions: "restart reset restart none"
    }
})
    .from("div.education ul li", {
        opacity: 0,
        x: 200,
        stagger: .5,
        duration: 1,
        ease: "back",
    })

Hii..

Sorry guys, i need ur help

 

i make this list element style like border element  with linier gradient..

i want to translate this list element. but, why background color of list element change to linier gradient ? i want to translate this element with background color body color

 

thankuu so much

[ZachSaucier]

Hey aryaaaarmdn and welcome to the GreenSock forums.

 

18 hours ago, aryaaaarmdn said:

why background color of list element change to linier gradient ?

It's not clear exactly what you're wanting help with. Can you please create a minimal demo of the issue using something like CodePen and share it with us? Please strip out everything that is not relevant to the issue.