Recreating The Apple Siri Website (Framer Tutorial)
🎓 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 the crazy bento card animation from the Apple Siri website with Framer. I'll show you how to use sticky positioning in a unique way to achieve this effect.
Original website: https://www.apple.com/siri/
Starter file + code override: https://framer.university/resources/a...
0:00 - Introduction
0:25 - Taking a look at the effect
1:07 - Document setup
3:27 - Creating the bento card
4:44 - Adding the text
6:51 - Adding the phone image
13:20 - Setting up sticky positioning
14:30 - The trick
18:06 - Changing background color as we scroll
25:23 - Your next steps
Follow me on:
X: https://x.com/learnframer
Instagram: / framer.university
Watch video Recreating The Apple Siri Website (Framer Tutorial) online without registration, duration hours minute second in high quality. This video was added by user Framer University 10 October 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 11,224 once and liked it 420 people.