iPhone 15 Pro Website with Framer (No-Code)

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create certain features of the new iPhone 15 Pro website with Framer. I'll show you how to create the new read more animations, and also how the overlay can be achieved without writing any code.
Original website: www.apple.com/iphone-15-pro/
Remix the project: framer.university/resources/i...
0:00 - Introduction
0:38 - Analyzing the animation
4:04 - Creating the animation states
20:43 - Connecting the variants
21:17 - How we will trigger the animation
22:20 - Adding the animation to the website
26:20 - Adding the overlay
30:33 - Adding close button to overlay
30:52 - Remix the project
31:13 - Play video when it comes into view
33:23 - Adding scroll transforms to images
34:38 - Important message
Follow me on:
X: x.com/learnframer
Instagram: / framer.university

[@kishorekumar8216]

Thanks a lot for providing us a banger tutorial Nandi and framer team ❤🤝✨

[@framer.university]

My pleasure mate! Glad u liked it:)
And btw, it’s just me. Running Framer Uni as independently 🫡

[@made_by_eiji]

The Apple website is always a great way to learn framer interaction. I love the tricks about the video component so we can unplay at the beginning and then play it when we scroll (that was clever!). Once again, I love how passionately you teach your audience. Looking forward to learning from you. Thanks 🤝

[@framer.university]

I'm glad that you could take some learnings away from this video! :)
More to come! ;)

[@user-pw7yi3jo8r]

Excelente! Você é fera, um salve do BR 🟩🟩🟨🟨

[@bryce-jones]

you're so quick with this one, thank you!

[@framer.university]

I try 🫶

[@nurpraditya]

Always love your video tutorial, keep it up Nandi! 👏

[@framer.university]

Thanks for the support! 🫶🫶

[@MrTopu-hi3bk]

very detailed and valuable video, thank you ❤

[@framer.university]

Thanks Topu for the kind comment :)

[@seanpark5884]

This is amazing work! Thank you so much!

[@framer.university]

Glad you like it!

[@gizaLook]

Really COOL!

[@framer.university]

Thanks a lot 🤜🤛

[@d3thshot614]

love it

[@framer.university]

thanks! :)

[@jeevansingh2366]

Whenever I watch your videos I always think why are your hands always orange? I can't unsee it 😂 Great video too btw

[@framer.university]

hahaha :DD
I have these random red spots on my skin around my body, especially on my hands. And I think the color grading of the video makes it a bit orangey.
Thanks btw! 🙌

[@aburex705]

This is really wonderful, I love what you do ✨
Also do you have any tutorial on scrolling (vertical scrolling then sticks and scrolls horizontally), like when you are scrolling vertically it reaches a point on the page and it triggers horizontal scrolling.
I hope I explained it well enough 😂

[@framer.university]

Yes you explained perfectly!
Will do a tutorial on that for sure! Added to the list :)

[@homestudioframer]

OMG I luv it. This is so much helpful thank you! Btw is this channel an official Framer youtube channel?

[@framer.university]

Thank you very much :)
No, I’m independent!

[@thewebstylist]

Wow!!

[@framer.university]

🫶🫶

[@hammedhafiz3126]

Hello, I tried to replicate the whole page and it all worked fine except the "text transform" animations imbedded in the overlays of the disappearing button. I mean that part where you didn't really cover

[@framer.university]

I’m not sure what are you referring to when saying “text transform animation”.

[@jansleyreal]

Any updates on the Framer course? :)

[@framer.university]

Working hard on it. I really hope I can release the beta in a couple of weeks.
Just making sure it’s top notch!

[@muneebdesigningwala]

‏Dear Nadi! What screen recorder did you use

[@framer.university]

Hey!
I use Screen Studio.

[@irzq_z]

Where and how can I get the iPhone video?

[@framer.university]

Hey! I got it from the official Apple site.
If you go into inspect mode on any site and then you go to the "Network" tab, you'll see all assets.
Beware that these are copyrighted assets and use it only for practice.

[@Dan_Iscra]

Hi, I am building a framer site for my company, and I am loading MP4 videos into the site. It shows up in the preview, but whenever I try and go to the website through Instagram or safari, the mp4 files are not loaded. Any solutions?

[@framer.university]

Make sure to check the file size. If it’s too big it won’t load quickly. Compress it with online tools. It should be larger than 2mb (MAX!).

[@yifankach]

Thanks for the video💯
Totally offtopic and just searched the comments, has anyone told you that you do bear a striking resemblance to Bollywood superstar Aamir Khan

[@framer.university]

Thanks!
Haha never go this. Someone else told I look like MrBeast though 😂