Streaming live at 10am (PST)

How to re-create webflow.com/blog page hero section animation

Hi there

How do I make a blog page hero section animation like on the official Webflow blog? https://www.screencast.com/t/q0xDaknB

I assume there must be a public project available with this feature.

I found something similar here, but I can’t view it in the designer: https://webflow.com/website/Quaint-Inc

There’s a div for the Hero section, with a background image set to Cover and Fixed. This div is set to Position:relative. inside of this div there’s another div set to Position:absolute; width 100% and height 100%. This div has a background color, like black. This black div is masking the whole image background, and it is set, in the Style panel (not in the color panel) to Opacity:40%. Then the other elements, heading etc, are placed inside of the Hero section div (so they’re sibling to the black div). Adjust the z-index of those elements for them to sit over the black div.

Now there’s an interaction set on the Hero div, using the trigger “When scrolling into view”, and set to “0% when start exiting, 100% when completely out”. Then inside of this IX there’s an Opacity action set on the black div: Opacity set at 40% when the IX is at 0%, and 0% when the IX is at 100%.

The interaction basically says: “When the Hero section is leaving the viewport, gradually decrease the Opacity of the black div up to 0%”

1 Like