Streaming live at 10am (PST)

How to move an animation on scroll

Hi guys,
I hope your are well and safe.

I’m trying to make an animation on scroll like on this prototype : on scroll, the beige line is becoming red, from top to bottom. And if you scroll back, it reverses.

proto

I’ve almost achieved to make it in Webflow but the animation starts from the center, not from the top like I want it to. Do you know how I could modify this to suit my needs ? I’ve tried to play with the transform settings but without success…

Here is my site Read-Only, to access the animation you need to be in tablet or horizontal mobile mode and to click on the burger menu : https://preview.webflow.com/preview/portfolio-marion?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-marion&preview=15a40808becc5a8563c00c409e763e7e&mode=preview

Thanks a lot for you help !

Justine.


Hi

you can fix it by adding the move
0% = -100%
100% = 0%
Overflow hidden on “Div Block 3”

Hi Mati, thanks it’s working !