Opening The Vault Scroll Interaction
Feb 7, 2023
Class breakdown
Section
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.
Card
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.