Framer 3D Transforms for Beginners (Crash Course)
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this tutorial, you'll learn everything you need to know about 3D transforms in Framer.
I'll explain what each transform does and how you can use them in practice to create amazing interactions and 3D animations.
I'll also show how you can combine these 3D transforms with components or scroll effects.
With the help of this video, you'll be able to create amazing 3D animations and interactions on your Framer websites, without writing any code, even if you're a complete beginner.
Framer Project Remix:
framer.university/resources/3...
00:00 - Introduction
00:54 - The roadmap
01:25 - Transform categories
02:54 - Scale
03:05 - Skew
03:13 - Rotate
03:38 - Perspective
05:44 - Origin
08:06 - Backface
10:52 - Preserve 3D
12:02 - Depth
14:01 - Preserve 3D again
18:34 - 3D card flip interaction
26:05 - 3D transforms scroll animation
29:40 - Additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
Пікірлер: 67
I love how Framer just reguraly invent the 4th dimension using nested 3D in their tools. Great job
I love how framer just reguraly invent the 4th dimension in their tools
Thank you for such a clear feature explanation!
@framer.university
3 ай бұрын
You're very welcome! I'm glad it was helpful.
Very good course, it explains the 3D principles slowly, and then provides corresponding examples
@framer.university
3 ай бұрын
Thanks! :)
thank you this is so clear and will make more better with this feature
@framer.university
4 ай бұрын
Happy to hear this :)
Very goooood !!!!
@framer.university
4 ай бұрын
thanks! :)
HeyNandi i love your videos and i have learned alot of things for my framer project, i wish if you can make a next video on how to change position of text while scrolling and also change its size or something and make it really intresting. Thank you so much for your guidance❤️ means alot!
@framer.university
3 ай бұрын
Thanks for the kind words! :) Try using scroll transform effect on your text to change its position (with offset) and its size (scale) as you scroll on the website.
Too much awesomeness
@framer.university
4 ай бұрын
Agreed
great feature, but i think most people waited something like a powerful form builder as an update
@framer.university
4 ай бұрын
Be patient! Now we have this. Next time we might have something else 👀
@dec7952
4 ай бұрын
Def cool feature but having an event wasn’t necessary or needed to be honest. I think everyone was so hyped and expected more from all the hype. We knew plugins were coming at some-point so people were expecting at least a lot more announcements regards things coming in the future. But great tutorial!
@ArthurGostick
4 ай бұрын
Seriously, a native powerful form builder would be so great.
@itslocane412
4 ай бұрын
Form builders are in the works
@andre.bandarra
4 ай бұрын
@@itslocane412 I belive, but this info came from what source?
excelent video as always! Just would like to know how to do the cube
@framer.university
3 ай бұрын
Thanks:) This is how you make the cube: x.com/learnframer/status/1778679019375861971?s=46
🎉🎉Brother🎉🎉
@framer.university
4 ай бұрын
💙
Great tutorial! Thank you! 🤩 Only one comment: “perspective” is a type of projection. By default (without perspective) we have “orthographic” projection, which also has z axis, the difference is only that orthographic projection shows 3D without «Perspective distortions», so that’s why the objects at different z-distances look the same size. (Like how z-index works). It might be helpful to know when you want to achieve nice “isometric” 3D style
@framer.university
4 ай бұрын
thanks for the addition, man! This is something I could've explained more clearly.
@Aximoris
4 ай бұрын
@@framer.university@framer.university Believe me, you did a great job explaining 3d axises so even beginners will understand! 👍
@framer.university
4 ай бұрын
@@Aximoris thanks a lot, mate! Was trying my best :)
Great update! One more feature added to arsenal, good to get this tutorial straightaway
@framer.university
4 ай бұрын
Thank you! I hope I could explain everything clearly:)
Mind blowing! Maybe asking too much but I wish you could add shadows to the text, button, etc. to make it more realistic
@framer.university
3 ай бұрын
You can! It’s on the right panel under styles.
Awesome as usual, Nandi! 👀Can you show an example of how would you create a 3D Laptop opening and closing on scroll?
@framer.university
3 ай бұрын
Thanks! ✌️ That’s a great idea! I’ll make that :)
@ErikFrits
3 ай бұрын
@@framer.university The best!
From previous comment. Your videos are one of the best on Framer to be honest mate. I have removed my previous post as it was a little unfair on you. I just wish Framer would create content that is on par with webflow. There seems to be alot of little videos concentraing on certain aspect with Framer, ie card sections, 3d scroll, responsive nav bar instead of building full web sites (like webflow) and teaching the canvas/editor/css/html as you go, like webflow 101. Hope all that made sense?
@framer.university
3 ай бұрын
Yes, mate I fully understand you! I’m asking because I’m on the mission of creating the best education experience instead of quick money grab. I’d love to talk to you about what you think makes educational content good. If you’re down, shoot me an email nandi(at)framer.university ✌️
I am having issues with interactions here... somehow the card keeps quickly flipping from back to front even if I don't click it. I also tried the back to front transition with a mouse leave interaction instead and had the same problem. Any idea why? 🤔
@framer.university
Ай бұрын
Well, to be honest I have no idea. Can you maybe share the remix link with me, so I can take a look?
Today I was trying to create an animation in Framer to animate an arrow to follow a path when scrolling. After 4 hours I found out that it just doesn't work. The only thing that can be animated is the stroke, and that's useless to me when I want to animate an arrow that points to something. I ended up making it using Lottie animation, but that just isn't the same.
How to make that 3D cube? I cannot find it in the resources attached
@framer.university
3 ай бұрын
Here’s a mini tutorial: x.com/learnframer/status/1778679019375861971?s=46
Do you need to use a tool like Spline to make a 3D cube like that? Or is that something you can make in framer?
@framer.university
4 ай бұрын
Remix link is in the description. Look at the file.all done in Framer with 3D transforms.
Hi, thanks for all the tutorials, not sure if you do requests or check your comments, but i think the framer world is lacking a full beginner build tutorial video, explaining the smaller bits and doing a full step by step build. could you consider doing something like this for us?
@framer.university
3 ай бұрын
Hey! Thanks for the recommendation! I’m definitely going to make tutorials that go into small details. Make sure to follow along. ✌️
How did you made that cube? I want to know!
@framer.university
3 ай бұрын
got ya covered: x.com/learnframer/status/1778679019375861971
How do you make the component responsive on all breakpoints?
@framer.university
3 ай бұрын
You can create multiple variants like "Tablet" or "Mobile" and optimize those for smaller screens. Then you just switch the component's variant on that specific breakpoint.
@MalcomTech-ez8ci
3 ай бұрын
I created a flip 3d card But I'm having issue with responsiveness On stack layout. I have the remix link if you will like to check it out. Thank you. Really need help.
I'm guessing it hasn't rolled out yet, because I don't see it on the browser or mac version yet.
@framer.university
4 ай бұрын
I'm sure you'll see it there really soon. Give them some time to push the changes to the active version.
Improve Cms filters please
@framer.university
4 ай бұрын
noted!
Yeah it’s cool. Would rather have better native sliders though
@framer.university
4 ай бұрын
Ok
Damn Framer is really hitting the ball out of the park.
@framer.university
4 ай бұрын
I know man. They're killing it.
Spline
@framer.university
4 ай бұрын
Framer
make spline render faster & let us upload bigger file sizes this is all framer is missing.
@framer.university
4 ай бұрын
Framer can't make Spline render faster. That's something Spline has to improve. Regarding file sizes: compress your files or buy a site plan that fits your needs.