Can this be recreated in webflow ? Sticky side div revealing text on scroll

Hi guys,

I would like to recreate a similar effect to this one.
WebflowAnim4

The home page is one long scrollable body. I would like one of the sections to step out of the normal flow and animate the right-side text to reveal on scroll while the left-side image sits still, before resuming the normal scroll flow of the page.
I played around but haven’t come close to it, even just the text sections appearing and the title color changing.

Any help would be very useful, thanks !


Design credit to Marqeta

Hey,

it’s a layout splitted in half of which one side has a normal “static” position setting, while the other one has a “sticky” position setting. The animation itself is another story though :slight_smile:

Check out Jörn’s reply in this thread: Half scrolling site layout - #4 by jorn

Hi Robin, thanks for your reply ! I did began with the split section and the sticky right side. My challenge is mostly with the content of that sticky div in revealing / animating the text as I scroll. Any idea how to get started ?

Add a new interaction on the parent section / div containing the splits. Select a “while scrolling in view” interaction, and add your keyframes of whatever you want to animate. That should get you started :slight_smile:

Thanks ! I’ll get to it :wink: