Recreating this scroll indicator animation

Hey guys,

This is the scroll indicator I’m trying to make using the interactions feature in Webflow (Thick Line Scroll Down Animation Using Background Gradient - CSS Animation Effects - YouTube). I can get part of it just following this webflow tutorial on how to create a scroll progress indicator, but using this method means I will have to change the origin point of my div block at the halfway point of the animation, which I don’t think is possible.

Any help is appreciated!

Hi Amanda,

Animation and Indicator are 2 different things…
The Animation is detached from any other element. It stands on it’s own and do not indicate about nothing.
The Indicator on the Webflow video is a direct result of scrolling the page.

Which one are you trying to create?

Oh, I’m trying to create the animation. The webflow video shows me how to do it using webflow’s scale interaction– I just have to use the element as a trigger instead of using the scroll trigger. Does that make sense?

It does. Anyhow, if Webflow doesn’t allow you to change transform-origin using its interaction platform, it’s still possible to use custom-code if you want that happening at any costs.