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

  • @AndrewPratama-v2n
    @AndrewPratama-v2n25 күн бұрын

    I love how Framer just reguraly invent the 4th dimension using nested 3D in their tools. Great job

  • @AndrewPratama-v2n
    @AndrewPratama-v2n25 күн бұрын

    I love how framer just reguraly invent the 4th dimension in their tools

  • @anastasiiafilenkova8582
    @anastasiiafilenkova85824 ай бұрын

    Thank you for such a clear feature explanation!

  • @framer.university

    @framer.university

    3 ай бұрын

    You're very welcome! I'm glad it was helpful.

  • @boycechi7972
    @boycechi79723 ай бұрын

    Very good course, it explains the 3D principles slowly, and then provides corresponding examples

  • @framer.university

    @framer.university

    3 ай бұрын

    Thanks! :)

  • @alvinrumbaoa
    @alvinrumbaoa4 ай бұрын

    thank you this is so clear and will make more better with this feature

  • @framer.university

    @framer.university

    4 ай бұрын

    Happy to hear this :)

  • @MACH_SDQ
    @MACH_SDQ4 ай бұрын

    Very goooood !!!!

  • @framer.university

    @framer.university

    4 ай бұрын

    thanks! :)

  • @notdoshi.1404
    @notdoshi.14044 ай бұрын

    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

    @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.

  • @mr.chinaski2613
    @mr.chinaski26134 ай бұрын

    Too much awesomeness

  • @framer.university

    @framer.university

    4 ай бұрын

    Agreed

  • @andre.bandarra
    @andre.bandarra4 ай бұрын

    great feature, but i think most people waited something like a powerful form builder as an update

  • @framer.university

    @framer.university

    4 ай бұрын

    Be patient! Now we have this. Next time we might have something else 👀

  • @dec7952

    @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

    @ArthurGostick

    4 ай бұрын

    Seriously, a native powerful form builder would be so great.

  • @itslocane412

    @itslocane412

    4 ай бұрын

    Form builders are in the works

  • @andre.bandarra

    @andre.bandarra

    4 ай бұрын

    @@itslocane412 I belive, but this info came from what source?

  • @user-om3hz2kk1d
    @user-om3hz2kk1d3 ай бұрын

    excelent video as always! Just would like to know how to do the cube

  • @framer.university

    @framer.university

    3 ай бұрын

    Thanks:) This is how you make the cube: x.com/learnframer/status/1778679019375861971?s=46

  • @kaldarges
    @kaldarges4 ай бұрын

    🎉🎉Brother🎉🎉

  • @framer.university

    @framer.university

    4 ай бұрын

    💙

  • @Aximoris
    @Aximoris4 ай бұрын

    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

    @framer.university

    4 ай бұрын

    thanks for the addition, man! This is something I could've explained more clearly.

  • @Aximoris

    @Aximoris

    4 ай бұрын

    @@framer.university@framer.university Believe me, you did a great job explaining 3d axises so even beginners will understand! 👍

  • @framer.university

    @framer.university

    4 ай бұрын

    @@Aximoris thanks a lot, mate! Was trying my best :)

  • @purnjayparmar
    @purnjayparmar4 ай бұрын

    Great update! One more feature added to arsenal, good to get this tutorial straightaway

  • @framer.university

    @framer.university

    4 ай бұрын

    Thank you! I hope I could explain everything clearly:)

  • @artcgix
    @artcgix3 ай бұрын

    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

    @framer.university

    3 ай бұрын

    You can! It’s on the right panel under styles.

  • @ErikFrits
    @ErikFrits3 ай бұрын

    Awesome as usual, Nandi! 👀Can you show an example of how would you create a 3D Laptop opening and closing on scroll?

  • @framer.university

    @framer.university

    3 ай бұрын

    Thanks! ✌️ That’s a great idea! I’ll make that :)

  • @ErikFrits

    @ErikFrits

    3 ай бұрын

    ​@@framer.university The best!

  • @petermckinnon3104
    @petermckinnon31043 ай бұрын

    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

    @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 ✌️

  • @meganrene15
    @meganrene15Ай бұрын

    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

    @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?

  • @invalidanacestach
    @invalidanacestach4 ай бұрын

    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.

  • @Deepak-jr2kw
    @Deepak-jr2kw3 ай бұрын

    How to make that 3D cube? I cannot find it in the resources attached

  • @framer.university

    @framer.university

    3 ай бұрын

    Here’s a mini tutorial: x.com/learnframer/status/1778679019375861971?s=46

  • @ArthurGostick
    @ArthurGostick4 ай бұрын

    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

    @framer.university

    4 ай бұрын

    Remix link is in the description. Look at the file.all done in Framer with 3D transforms.

  • @lgarnz4314
    @lgarnz43143 ай бұрын

    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

    @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. ✌️

  • @pranavsharma1037
    @pranavsharma10373 ай бұрын

    How did you made that cube? I want to know!

  • @framer.university

    @framer.university

    3 ай бұрын

    got ya covered: x.com/learnframer/status/1778679019375861971

  • @MalcomTech-ez8ci
    @MalcomTech-ez8ci3 ай бұрын

    How do you make the component responsive on all breakpoints?

  • @framer.university

    @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

    @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.

  • @TCakes
    @TCakes4 ай бұрын

    I'm guessing it hasn't rolled out yet, because I don't see it on the browser or mac version yet.

  • @framer.university

    @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.

  • @nazirovahmad4216
    @nazirovahmad42164 ай бұрын

    Improve Cms filters please

  • @framer.university

    @framer.university

    4 ай бұрын

    noted!

  • @guapshonen
    @guapshonen4 ай бұрын

    Yeah it’s cool. Would rather have better native sliders though

  • @framer.university

    @framer.university

    4 ай бұрын

    Ok

  • @pmanvish
    @pmanvish4 ай бұрын

    Damn Framer is really hitting the ball out of the park.

  • @framer.university

    @framer.university

    4 ай бұрын

    I know man. They're killing it.

  • @balkosa
    @balkosa4 ай бұрын

    Spline

  • @framer.university

    @framer.university

    4 ай бұрын

    Framer

  • @goatedchild6345
    @goatedchild63454 ай бұрын

    make spline render faster & let us upload bigger file sizes this is all framer is missing.

  • @framer.university

    @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.