Ismael Martínez



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.

Sticky Animation

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 (
            {props.stuck ? "Pinned" : "Unpinned"}

This is useful, for example, if you want to perform an animation between the two states.

Sticky Animation with Code Components


  • 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.

Sticky Animation showing a full example


  • 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 StickyElement using component instances
  • Add support to work with code components based on pinned status
  • Rebuild with two componentes and remove Overrides
  • First release

Bugs & Help

See also