How to dynamically reveal sticky footer?

I’m trying to replicate the effect seen on the footer here:

I’ve achieved the reveal effect by making the footer sticky and giving it a negative z-value, but I’d also like to have the section gradually come up as the user scrolls.

I’ve tried ScrollTrigger to gradually move the footer up on scroll, but it’s quite clunky.
I have a feeling there’s a simpler, or even Webflow-native solution.

Cuberto’s footer seems to be static with position relative, and I’m guessing some sort of position transform is progressively applied. But I might be wrong, I don’t really mess with code much.

How would you implement it?

EDIT: I got fairly close with a native “while scrolling” interaction on the above section that brings up the footer. But I realise that the same could be achieved on a fixed footer with overflow hidden by bringing the content down. But it does feel quite hacky.

EDIT 2:

But I realise that the same could be achieved on a fixed footer with overflow hidden by bringing the content down.

This was the solution! I’ll leave this up in case anyone finds it useful.


Here is my site Read-Only: LINK
Live Site

1 Like

Hi @Knitch :wave: welcome to the forum.

That’s a nice effect on the Cuberto site.

I wanted to see if I could replicate it, and I did.

It doesn’t feel as solid as Cuberto’s but with a bit more time I think it would be.

I solved it by setting the content to a relative position, then I moved the footer up behind it.

Created an interaction and revealed it on scroll.

Seems I took a different approach than what you’ve described.

Thanks for sharing this!

1 Like

Solid approach, thanks for posting!

I think locomotive scrolling really brings the effect together, that’s probably why Cuberto’s feels so nice. I’m trying Lenis scroll on my site and I like it so far as it doesn’t override the browser’s scrolling behaviour :ok_hand: