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.
macOS, Safari, Chrome, Firefox, and None (fullscreen app)
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,
};
};
export const StickyWithinRange: Override = () => {
return {
// NOTES: 200=where sticky starts, 400=where sticky ends
top: Math.min(Math.max(data.staticTop, 200), 400),
};
};
export const Parallax: Override = () => {
return {
// NOTES: play with the decimal and yValue to get what you want
top: data.staticTop * 0.5 + 200
};
};
Reach out if you have any feedback, i’d love to hear it.
✉️ maxsteitle@me.com