Apple Siri Website with Framer

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

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.

Creator

Nandi Muzsik

Founder @ Framer Uni

Nandi Muzsik

Founder @ Framer Uni

Nandi Muzsik

Founder @ Framer Uni

Nandi Muzsik

Founder @ Framer Uni

Remix

Demo

Tutorial

Remix

Demo

Tutorial

Remix

Demo

Tutorial

Remix

Demo

Tutorial

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.

Start learning now

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Start learning now

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Start learning now

More resources

View all

Remix

Demo

Copy component

Skeuomorphic Buttons in Framer

Remix

Demo

Apple Siri Website with Framer

Apple Siri Website with Framer

Apple Siri Website with Framer

Apple Siri Website with Framer