Website animation
Website animation
Website animation
Website animation
Apple Siri Website with Framer
Apple Siri Website with Framer
Apple Siri Website with Framer
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.
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.
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.
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.
Features
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!
Step / 01
Remix the project for free.
Step / 02
See how it's built.
Step / 03
Try recreating it for practice.
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" }} />
)
}
}
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free
Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.
Free Framer Course
Learn how to create stunning websites with ease by learning the fundamentals of Framer.