Sticky Showreel That Expands on Scroll (Fixed to Bottom Right in Hero)

Design help Animations & Interactions
1

Hey all — I’m trying to build a custom scroll interaction in Webflow and need some help making it work properly.

What I’m trying to achieve:

  • I have a hero section that fills the entire screen
  • The heading is top-left, and the CTA is bottom-left
  • A showreel sits in the bottom-right, around 400px wide
  • The showreel is fixed to the bottom-right of the screen on page load

Here’s the effect I want:

  • When the user scrolls, the showreel stays pinned bottom-right
  • As they scroll into the next section, the showreel scales up from its top-left corner
  • It continues to grow until it fills the screen
  • Once full-screen, it locks in place, and the user can keep scrolling to the next section
  • If the user scrolls back up, the reel should shrink back down into its original 400px position in the hero

What I’ve tried:

  • Fixed positioning for the reel
  • JS scroll-based scale logic
  • Using a 200vh scroll trigger section
  • CSS transform-origin: top left
  • I can’t get the scale to work or lock correctly
  • Tried it inside and outside the hero, still no luck

Anyone done something similar or know how to build this in Webflow (with or without minimal custom code)?

I’d be super grateful for a cloneable, JS fix, or even just a working structure I can follow.

Thanks :folded_hands:

2

Hi there,

To create a scroll-based animation for your showreel, start by setting up your showreel div with fixed positioning and an appropriate z-index value to ensure it stays visible above other content while scrolling.

To set up the scroll animation, open the Interactions panel and select “While page is scrolling” from the Page trigger menu. Then create your scale animation by adding two keyframes:

  1. Set the first keyframe at 0% scroll position with Scale x-axis at 0
  2. Add the second keyframe at 100% scroll position with Scale x-axis at 1

For smooth scaling from the left side, go to the Style panel > Effects > 2D & 3D transforms and set the transform origin to “left”. This ensures your element scales from the left edge rather than from the center.

You can fine-tune the animation timing and easing in the Interactions panel to achieve the exact effect you’re looking for. For more information about layering elements properly, check out the z-index documentation in Webflow University.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.