How on earth do I make something like this

The “level up” section is beautiful - how would I even go about making this? What is the default layer and what changes? How do I make a progress bar slide across within the boundaries of the div tag?

Please forgive me, I’m an noob - but loving using webflow!


@harv - this should be pretty straight-forward, you would use a While scrolling in view trigger to resize a nested div.

You would have an outer wrapper div with a black backround and overflow set to hidden. Then an inner div that is maybe slightly larger than the parent on all sides. You would set an interaction to grow that element while scrolling - which would create the effect.

2 Likes

Thank you so much Sam - super helpful. I will experiment now and get back to you. But that sounds pretty solid.

Cheers!

Follow up Question: How to make the child div larger than the parent?

Really appreciate the help.

@harv - in this scenario I would probably set the parent to position relative, the child to position absolute and then set width and heights at 110% or something like that.

1 Like

You’re a hero. Thank you Sam!