It is necessary to put the percentage value of the key in the object

I have this code:

gsap.to('.planet-man', {
    duration: 2,
    scrollTrigger: {
        trigger: '.we-do',
        start: 'top 25%',
        end: '70% 50%',
        scrub: 1,
        markers: true,
        toggleActions: 'reverse',
    },
    motionPath: {
        path: [
            {x: -30, y: 35},
            {x: -180, y: 70},
            {x: -180, y: 150},
            {x: -340, y: 250},
            {x: -410, y: 275},
            {x: -150, y: 310},
            {x: -500, y: 350},
            {x: -185, y: 600},
            {x: -270, y: 700},
            {x: -100, y: 820},
        ],
    }
});

This is for scrolling, but since the movement is pixel-by-pixel, it is static. I need X - to set a percentage value so that it can be optimized for many screens and not just for my own. Perhaps a function that will dynamically measure the width of my screen and substitute my X values there, in accordance with my screen to the rest, will suit me.

$(window).resize(function() {
     $('.second-area').css('width', function () {
         const value = $('.second-area').css('width');
         console log(value);
         // return value + "px";
     });
});

The question is how can I do this? ( The code with window.resize is optional, it's just what I have at the moment. Only one x is important, give a percentage value. )