A Framer X package to use Sticky elements within scroll components.
After install this package you will get two components: Sticky
and StickyElement
.
Sticky
component works exactly as a Scroll interactive component.StickyElement
must be connected to any frame that you want to be sticky.Example based on 30 days of Framer X by Anne Lee.
StickyElement
accepts two component instances:
Default
: the default element that will show when is pinned or not.Pinned
(optional): a component to render when the element is fixed positioned.In other complex scenarios, if you connect a StickyElement
to a code component,
when its position is fixed, your code component will receive a boolean stuck
property.
You can create a Header
code component that works with stuck
state like this:
export function Header(props) {
return (
<Frame>
{props.stuck ? "Pinned" : "Unpinned"}
</Frame>
)
}
This is useful, for example, if you want to perform an animation between the two states.
offset
parameter to each sticky element.StickyElement
within scroll content frame.StickyElement
nested on other elements.Frames in Framer X sometimes doesn't has a top value, this happen because the element has
Pin bottom alignment on canvas. In that case, the component will calculate the top
position based on his height and bottom position and also from parents layout values.
It's recomendable to change StickyElement
and parents frames alignment to Pin top,
it's more efficient and will work correctly.
The following is a 1x speed animation showing how it works efficiently with multiple cases.
StickyElement
StickyElement
using component instances