Hi there,
Im trying to recreate this hero section overlay animation in Webflow. I have a feeling it has to do something with the sticky positioning, but can’t find the right method to do so.
This is the effect I want to recreate:
If anybody can direct me into the right direction, that would be awesome.
Hey @wouterjesse,
I may have figured out a way for you. I have setup most of the animation but you could fine tune all of this as you please.
Step 1:
Create a div with class="overlay" in your section.
Step 2:
Set the overlay styling as such: position: absolute {top left}; z-index: 5000; width: 100%; height: 100%
Step 3:
Add your Heading element or Text Body element within overlay, write whatever you want the text to say!
For the text to be at the bottom you have to set the position: absolute {bottom}; margin: 60px; color: #yourchoice; text-align: center
Step 4:
Animation time. Select your section wrapper and got to the interactions tab > page trigger > page load > when page finishes loading > new animation and this is the general animation timeline we will be creating
Here are the details for each animation:
And that’s it, here is the end result (I apologize for the terrible gif quality)
Hope this helps!
Thank you so much for your effort, but the actual animation I am looking for is the scrolling animation of the hero section. When scrolling it would reveal the section underneath it.
Do you have any feedback on this animation as well?
Thank you for helping me out!
@wouterjesse were you able to find a solution? If found this project which (I think) using the same effect in the opposite direction. Webflow Showcased | Apple Card Scroll Animation
