Let’s call this distance something descriptive, say distanceToScrollToStopSticky (so inventive with names, aren’t I). and the distance we scrolled downwards to reach that point where the behavior will change, as defined above.how far from the top of the screen was the element originally placed,.If you look at the drawing above, to calculate this distance we should take into account the following: How do we assess this scrolling distance when this is supposed to start happening? We also know that, while scrolling down, once we reach our element’s initial position on the Scroll Content frame, it needs to start moving on the y-axis, along with the rest of our content (its position will stop being fixed at the bottom of our viewport). Let’s name it something, as well, say stickyDistanceFromTop: stickyDistanceFromTop = (height of screen) - (height of element) How much, though, so that it will be placed precisely at the bottom of our screen? We can assess this as the height of our viewport/screen minus the height of the element (so that it’s positioned precisely at the bottom). To turn our Sticky element into, well, a sticky element at the bottom of our screen we need our override to push our element upwards. Let’s call this, what else, “Sticky Element”

This frame will be connected to our scroll component. a frame with the content we will be scrolling through.This frame will be hosting our scroll component. a frame that represents the screen through which we will be viewing the prototype.To prototype this sort of behavior, we will need (at least) three frames: Jake Stakelon takes this a step further in this great tutorial Making Sticky Headers and Parallax and All The Scroll Effects with Framer X.īoth of the above are great resources and will definitely help understand better what’s happening here.

In his great article “Mastering Scrolling in Framer”, Gilles Perry provides a great overview to not only using scroll components but also measuring the distance our content is offset as we scroll through the contentOffsetY prop.

So, where do we start in order to build this in Framer combining its design tools, its support for React, and all the goodies the Framer library brings along? Useful tutorials this post is based upon Native sticky-to-bottom browser behavior to be reproduced in Framer

Enigma parallax menu under header