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
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!
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.
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!
Thank you for this clear explanation! I succeeded in making it the way you suggest and it looks great in Chrome and Arc, but in Safari the cards flip way to fast and the background is not visible. Do you have any idea how to solve this? Thank you!
hmm that's weird. it should work in safari. but gotta be honest, Safari tends to be weird with these crazier effects. thankfully not many people use it.
Think I'm missing something? - is the cube a 3d model brought in, if so, what's the format? Or was it extruded within Framer from a 2d rectangle plane?
I'm having a problem here, I've followed the instructions, made the frame family preserve 3D active but the element / content in the frame when adding depth doesn't happen anything. Does anyone know why?
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? 🤔
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?
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 ✌️
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.
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?
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.
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.
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.
I love how Framer just reguraly invent the 4th dimension using nested 3D in their tools. Great job
Your excitement is contagious ! Thanks for the great tutorial
You're welcome!
I love your tutorials bro ❤
thank u so much mate 🫶
Very good course, it explains the 3D principles slowly, and then provides corresponding examples
Thanks! :)
Thank you for such a clear feature explanation!
You're very welcome!
I'm glad it was helpful.
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
thanks for the addition, man! This is something I could've explained more clearly.
@@framer.university@framer.university Believe me, you did a great job explaining 3d axises so even beginners will understand! 👍
@@Aximoris thanks a lot, mate! Was trying my best :)
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!
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.
I love how framer just reguraly invent the 4th dimension in their tools
Great update! One more feature added to arsenal, good to get this tutorial straightaway
Thank you! I hope I could explain everything clearly:)
great feature, but i think most people waited something like a powerful form builder as an update
Be patient!
Now we have this.
Next time we might have something else 👀
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!
Seriously, a native powerful form builder would be so great.
Form builders are in the works
@@itslocane412 I belive, but this info came from what source?
thank you this is so clear and will make more better with this feature
Happy to hear this :)
Mind blowing! Maybe asking too much but I wish you could add shadows to the text, button, etc. to make it more realistic
You can! It’s on the right panel under styles.
Thank you for this clear explanation! I succeeded in making it the way you suggest and it looks great in Chrome and Arc, but in Safari the cards flip way to fast and the background is not visible. Do you have any idea how to solve this? Thank you!
hmm that's weird. it should work in safari. but gotta be honest, Safari tends to be weird with these crazier effects. thankfully not many people use it.
its possible to drag an objet in a 3d space, like for example creating a sphere and rotating it in the y axes??
Yes! Check this video:
framer.university/lessons/interactive-3d
Think I'm missing something? - is the cube a 3d model brought in, if so, what's the format? Or was it extruded within Framer from a 2d rectangle plane?
Everything is built in Framer.
These are 2D objects transformed in 3D space to form 3D like elements.
I'm having a problem here, I've followed the instructions, made the frame family preserve 3D active but the element / content in the frame when adding depth doesn't happen anything. Does anyone know why?
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? 🤔
Well, to be honest I have no idea.
Can you maybe share the remix link with me, so I can take a look?
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?
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 ✌️
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.
excelent video as always! Just would like to know how to do the cube
Thanks:)
This is how you make the cube:
x.com/learnframer/status/1778679019375861971?s=46
How to make that 3D cube? I cannot find it in the resources attached
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?
Remix link is in the description. Look at the file.all done in Framer with 3D transforms.
Awesome as usual, Nandi!
👀Can you show an example of how would you create a 3D Laptop opening and closing on scroll?
Thanks! ✌️
That’s a great idea! I’ll make that :)
@@framer.university The best!
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?
Hey! Thanks for the recommendation!
I’m definitely going to make tutorials that go into small details. Make sure to follow along. ✌️
How do you make the component responsive on all breakpoints?
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.
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.
How did you made that cube? I want to know!
got ya covered:
x.com/learnframer/status/1778679019375861971
🎉🎉Brother🎉🎉
💙
I'm guessing it hasn't rolled out yet, because I don't see it on the browser or mac version yet.
I'm sure you'll see it there really soon. Give them some time to push the changes to the active version.
Very goooood !!!!
thanks! :)
Too much awesomeness
Agreed
Damn Framer is really hitting the ball out of the park.
I know man. They're killing it.
Improve Cms filters please
noted!
Yeah it’s cool. Would rather have better native sliders though
Ok
make spline render faster & let us upload bigger file sizes this is all framer is missing.
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.
Spline
Framer