Animated border on zoom into view

Hello, I would like to animate a border for a heading one of my pages. When scrolled into view, I want it to slide down. Here is the page. It should help to give you a better idea of what I am going for. I want to the title to slide down from the top, and then have the bar to the left of it slide down after. Is something like this doable? Thank you so much!

Here is my public share link:

Hey there @ErichBoehm - could you please explain in more detail what you are wanting? Someone else may understand what you want to do, but it isn’t clear to me from your post.

  • What border are you referring to?
  • Where do you want the border to slide down to?
  • Which title are you referring to?
  • Where should the bar to the left go?


I want to animate that grey border to the right of the “Residential and Commercial.” I want it to start very short (say, 50 pixels), and then slide down to its current length. Thank you so much!

Hey @ErichBoehm,

Do you mean the border to the left?

Yes! That is the one! Sorry for the confusion!

Thanks for clarifying!

Just so I completely understand, when a user scrolls this section into view, you want the gray line on the left to start at 50px and then grow to its full length?

Do you want it to grow with the amount someone scrolls? For example, if someone is scrolling and they can only see 50% of the section on their screen, do you want the gray line to only grow by 50%?

Or, when the user scrolls this section into view, regardless of the amount of the section that is shown on the screen, the gray line grows to 100%?

I want the bar to grow it’s full length regardless of the amount that is shown on screen.

Is this doable in webflow?

When you say full-length, is the below picture full-length or do you want it to span the entire height of the gray textured area?

Yes, full-length as show in the image.

Is there any way to do this?