🎓 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/apple-siri-website-with-framer
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: https://instagram.com/framer.university