Scroll Animation Not Responsive

Hi Webflow community!
I’m new here and I am currently facing the following challenge:
I am trying to create scroll animation for purple square (you can see in read-only link) so it will change its location/scale/BG color while scrolling.
My problem - different sizes of screen.
I created the animation but every time I check this page on different screens , the square located differently on the page.
I tried to change the units of measurements to ‘vw’ and ‘vh’ so it will be responsive but it was’nt the solution.

I will explain what the locations that I’m expected too -
0% - top-right

5%-26% - the square will be like a dot on the end of the sentence - “It’s about the people for us”

25%-43% - right-botton corner of the second image and behind it

64%-82% - as background for ‘Our Values’ section

82%-100% - locate in the middle on the last image

Here is my read-only link:

Thank you very much in advance!

Best regards