☀ Check out our new pay-what-you-want Webflow portfolio template — Exhibit
Opening The Vault Scroll Interacti...

Opening The Vault Scroll Interaction

Feb 7, 2023

Preview example (live)Preview example (read-only)
Opening The Vault Scroll Interaction

Class breakdown


The section is a standard section, but set to 300VH in height. This makes us able to scroll our sticky container later.

Container Sticky

This container contains the main card. It's set to cover the screen by using a 100VH height and 100% width. However, it also has a max-width of 1440px.

In order to give some breathing room, it has a padding of 3REM on all sides; top, right, bottom and left.

The most important part is its position setting, which is set to sticky. It sticks to the top at 0px.


The Card spans out 100% on the width and 100% on the height. It has a relative position in order to make its image absolute and relative to it.

Its overflow is also hidden. This is used to keep the image contained while scaling it up in the interaction.

Card Image

The card image has an absolute position, filling the whole card. Its z-index is set to 1 in order to keep it a "layer" below the content of the card.

Card Heading

The heading has a z-index of 2 to keep it on top of the image.

The interaction

The interaction is fairly simple. It's a "while scrolling in view" interaction placed on the 300VH section.

The main focus of the interaction is to grow the height of the card itself. It starts out at a 0% height (on keyframe 0), and grows to 100% (on keyframe 100). To make it more intereresting, the card also scales from 0.8 (at keyframe 0) to 1 (at keyframe 100).

The last part is scaling the image in reverse. It scales from 1.4 (keyframe 0) to 1 (keyframe 100). This makes the scroll effect more "zoomy" and cool.

The video