Usage
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.
Handle status
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.
Notes
- You can use code overrides to apply effects based on scroll position.
- You can set a
offset
parameter to each sticky element. - You can set multiple
StickyElement
within scroll content frame. - It works with
StickyElement
nested on other elements. - It only works for vertical scroll.
⚠️ Important
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.
⚡️ Performance
The following is a 1x speed animation showing how it works efficiently with multiple cases.
Changelog
v2.4.0
- Fix bug 🐛
v2.3.0
- Add Responsive mode to
StickyElement
v2.2.0
- Add support for code overrides
v2.1.0
- Fix bug with X position of Sticky elements
- Fix bug when looking Sticky elements within frames
v2.0.0
- Complete refactoring using the new Framer API
- Add pinned state to
StickyElement
using component instances - Add support to work with code components based on pinned status
v1.1.0
- Rebuild with two componentes and remove Overrides
v1.0.0
- First release
Bugs & Help
- GitHub: Sticky.framerfx
- Twitter: @ismamz