Animate function

Hello,

I have been using the animation function to create a custom slider nav bar, showing slider position.
Works perfectly, however it is not responsive to window size, as my animation function uses a constant pixel value. When the window becomes smaller, the container scales down and no longer is size 890px, but my animate function still moves the same pixel size (890/4px), which means it moves out of the screen.

My current function:
$(‘.bar’).animate({left: “+=” + 890/4 + “px”});

Is it possible to easily animate according to the size of the parent container. I want the div block to move 25% right/left of its parent container size, every time slider arrow is pressed.

I was thinking of something like: $(‘.bar’).animate({left: “+=” + 25 + “%”}); …but this doesnt work.

Ps. I know that I could possibly achieve this with if/or statements but really hoping I can just have one simple animate function, using percentage of parent element as unit.

My site:
https://josephs-stupendous-project-50563f.webflow.io/

Thanks in advance :))))