Animation
Apple Siri Website with Framer
This is an unofficial recreation of the sick bento effect from the Apple Siri website. This project really rocks, showing off Framer's unique knack for crafting high-quality websites.
You can click this link to get the starter file I used in the tutorial video, so you can follow along.
Created by
About the resource
Well, this effect is as tricky as they come. We utilize sticky positioning and a tad bit of coding. But don't sweat it, I'm planning to guide you all through it in a video tutorial that's on the way. Keep your eyes peeled, Framer folks!
Code override for setting top value
You can copy and paste this code into your project, and create the code override from scratch.
About the resource
Well, this effect is as tricky as they come. We utilize sticky positioning and a tad bit of coding. But don't sweat it, I'm planning to guide you all through it in a video tutorial that's on the way. Keep your eyes peeled, Framer folks!
Code override for setting top value
You can copy and paste this code into your project, and create the code override from scratch.
About the resource
Well, this effect is as tricky as they come. We utilize sticky positioning and a tad bit of coding. But don't sweat it, I'm planning to guide you all through it in a video tutorial that's on the way. Keep your eyes peeled, Framer folks!
Code override for setting top value
You can copy and paste this code into your project, and create the code override from scratch.
import type { ComponentType } from "react"
export function withStickyTop(Component): ComponentType {
return (props) => {
return (
<Component {...props} style={{ position: "sticky", top: "50vh" }} />
)
}
}import type { ComponentType } from "react"
export function withStickyTop(Component): ComponentType {
return (props) => {
return (
<Component {...props} style={{ position: "sticky", top: "50vh" }} />
)
}
}import type { ComponentType } from "react"
export function withStickyTop(Component): ComponentType {
return (props) => {
return (
<Component {...props} style={{ position: "sticky", top: "50vh" }} />
)
}
}
