Framer Tutorial: Creating the Apple Vision Pro Scroll Animation
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create the Apple Vision Pro scroll animation on your Framer website. I'll show you how such animation is structured and how you can use code overrides to give superpowers to your website. After watching this video, you'll be able create sick animations on your Framer websites.
Starter file + project remix:
framer.university/resources/a...
Original site: apple.com/vision
0:00 - Introduction
0:23 - Analyzing the animation
3:44 - Inserting all the images
6:05 - Layering the assets in the breakpoint
10:30 - Checking the preview and correcting mistakes
11:00 - Setting up sticky positioning
14:26 - Adding the scroll transforms
24:10 - Playing the video on scroll
24:54 - Learn more
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
Пікірлер: 36
This channel is the best at framer tutorials, I learned a lot of stuff from you. Keep up the great work, Nandi!
@FloNocode
5 ай бұрын
Definitely !
@framer.university
5 ай бұрын
Happy to hear that! Thank you :))
I was waiting this tutorial particulary from you Nandi ) Thank you so much)
@framer.university
5 ай бұрын
Thank you so much 🙂
I really love the content on your channel and the quality you deliver. Could you do a tutorial starting from the basics? A simple Landing Page maybe..
@framer.university
5 ай бұрын
Thanks for the kind words! :) Yes I’m definitely planning on doing more content about basic stuff in the near future! Stay tuned;)
Thank you!
@framer.university
5 ай бұрын
You're welcome!
thank sir. Best tutorial
@framer.university
5 ай бұрын
So nice of you :)
This is Insaneeee
@framer.university
5 ай бұрын
I know! Framer is too powerful..
Nandi, am trying this thing during weekends!
@framer.university
5 ай бұрын
Love to hear it :)
Good job Nandi! this is impressive! When will the framer course be ready?
@framer.university
5 ай бұрын
Thanks man :) Courses are releasing this year! Stay tuned :)
yes baby
@framer.university
5 ай бұрын
Yess ✨
🔥🔥🔥🔥🔥
@framer.university
5 ай бұрын
🫶🫶
Thanks Nandi. Appreciate all you do Question: Does the withScrollProgress override replace the override that needs you to turn the video into multiple images and turn them to a variant? Or are there different use cases for both overrides? Thanks again
@framer.university
5 ай бұрын
Hey! The override we used in this video is for playing VIDEO on scroll. On the other hand, if you don't have a video, but an image sequence, then you can use the other approach by playing the sequence on scroll with the image sequence override. Makes sense? :)
Bro how do you get this images
@framer.university
2 ай бұрын
From the original site.
Can this also be used for video? I mean the video scrolling would move in frames forward or backward depending on whether we are scrolling down or up.
@framer.university
4 ай бұрын
Yes check my AirPods Pro video.
@terapeutstesti
4 ай бұрын
@@framer.university Thank you.
Hi, When is your full framer course is coming out?
@framer.university
5 ай бұрын
I'll release multiple Framer courses this year. No specific date yet. Stay tuned :)
Hi Nandi, where we can access to all assets for this tutorial please?
@framer.university
5 ай бұрын
Everything is in the remix! :)
Does this scroll animation work on mobile view too?
@framer.university
5 ай бұрын
Of course. It could be optimized for mobile.
Please can you do a tutorial on how to send Contact Form data to WhatsApp
Wait, so...top?