Resizable Window

Max Steitle

A window that emulates… all your other windows. Have fun, and build prototypes so real you start to forget what is or isn’t a prototype on your desktop.

Anyways, this thing can either be like a macOS window, Safari , Firefox, Chrome, or None so you can fill it in with whatever native app you’re working on.

Cool things about this

  • Set minimum width + height
  • Choose whether it’s scrollable or not (fullscreen app)
  • Quick responsive design using @Steve Ruiz’s magical responsiveness component that’s built in
  • Overrides for sticky elements, parallax, and more
  • I built it

Demo

Download here


For the hardcore (Overrides)

Add this ↓ to the window

const data = Data({
    top: Animatable(0),
    staticTop: 0,
    height: 400,
    width: 400
});

export const AddWindowEvents: Override = () => {
    return {
        onScroll(top) {
            data.top = top;
            data.staticTop = top;
        },
        onHeightChange(height) {
            data.height = height;
        },
        onWidthChange(width) {
            data.width = width;
        }
    };
};
Add these ↓ to things in the Frame

export const windowHeight: Override = () => {
    return {
        height: data.height
    };
};

export const windowWidth: Override = () => {
    return {
        width: data.width
    };
};

export const Sticky: Override = () => {
    return {
        top: data.top,
        willChangeTransform: true
    };
};

export const StickyWithinRange: Override = () => {
    return {
     // NOTES: 200=where sticky starts, 400=where sticky ends
        top: Math.min(Math.max(data.staticTop, 200), 400),
        willChangeTransform: true
    };
};

export const Parallax: Override = () => {
    return {
     // NOTES: play with the decimal and yValue to get what you want 
        top: data.staticTop * 0.5 + 200
    };
};

🚨 Known Framer Bugs
Some elements don’t resize correctly in Preview, but do in Canvas. Framer is working on the fix. For text elements, wrap them in a Frame and they’ll resize. For Scroll, Page, Stacks, and certain Code components use the width override to make it responsive.

Reach out if you have any feedback, i’d love to hear it.

✉️ maxsteitle@me.com

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree