After install this package you will get two components: Sticky and StickyElement.
Stickycomponent works exactly as a Scroll interactive component.StickyElementmust 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.
- You can use code overrides to apply effects based on scroll position.
- You can set a
offsetparameter to each sticky element. - You can set multiple
StickyElementwithin scroll content frame. - It works with
StickyElementnested on other elements. - It only works for vertical scroll.
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.
- Fix bug 🐛
- Add Responsive mode to
StickyElement
- Add support for code overrides
- Fix bug with X position of Sticky elements
- Fix bug when looking Sticky elements within frames
- Complete refactoring using the new Framer API
- Add pinned state to
StickyElementusing component instances - Add support to work with code components based on pinned status
- Rebuild with two componentes and remove Overrides
- First release
- GitHub: Sticky.framerfx
- Twitter: @ismamz