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:
https://preview.webflow.com/preview/demo-site-fd308a?utm_medium=preview_link&utm_source=designer&utm_content=demo-site-fd308a&preview=c5c534d6441c3a65974632892ace34cc&workflow=preview
Thank you very much in advance!
Best regards
Herut