iPhone 15 Pro Website with Framer (No-Code)
🎓 Framer University: https://framer.university
👉 Create a free Framer account: https://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: https://www.apple.com/iphone-15-pro/
Remix the project: https://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: https://x.com/learnframer
Instagram: / framer.university
