Framer Trick: Convert 2D Elements into Interactive 3D Objects
HTML-код
- Опубликовано: 19 июн 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this tutorial, you'll learn how to turn any 2D element into an interactive 3D object in Framer.
I'll show you how to use my 3D Look component to achieve various interactive 3D animations and interactions on your website.
References:
3D Carousel: x.com/Ibelick/status/17904334...
Linktree: linktr.ee/
3D Transforms Crash Course:
framer.university/lessons/fra...
Project Remix + Component + Override:
framer.university/resources/3...
0:00 - Introduction
0:52 - Simple 3D Hover
4:05 - 3D Carousel Drag
20:08 - Linktree 3D Card
27:22 - Additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
You're the best out there nandy. If I search for a great animation tut my first thought is to check nandy's page :)
appreciate you so much!!
You're so great at this
💙💙 Thank you so much!
i love your work brother
Thank you so much mate :)
Great tutorial as always! One request for you 3D Look component, could you make the option to follow the cursor/3D effect ONLY if the cursor is over the card? I am thinking to use it in logos, so I don't want the logos to be "loking" at my cursor if I am not touching them, or could this be solved with a simple hover?
Your tutorial format and content is gettting better day by day. Can you make a tutorial how did you make component 3D Look?
Appreciate you!! :) trying to improve every week.
3D look is a code component and this channel is about no-code website building so I’m probably not going to make a video about that. I hope u understand:)
nandy, do you have any tutorials on how to make transitions going from one section to another. I'm really stuck with that.
I know this is very off-topic, but how do you achieve the smooth cursor movement in your videos? I'd really love to know!
By using screen studio for recording.
In last part, how do you make it follow cursor? Is that a code override?
I just disable dragging in the component. Lemme know if you can find that setting!
Watching your old videos and this video comes out🎉🎉 do you hv linkedin
I don't have linkedin. I hope u like this vid :)
very nice!! can we create a custom draggable carousel?
I mean a regular carousel but custom, it can be dragged and the prev and next buttons can also be customized, is this possible at this time?
🤩
This is aweseome! How do you make it autoplay?
Thank you so much :) Autoplay?
@@framer.university Thank you for replying Nandi. Yes like the component slides from left to right in auto play mode. Currently it animates only when I drag it.
@@travelbeing_kannada the component has a dragging toggle, if dragging is set to "no", it will follow the cursor automatically. Lemme know if this works.
@@framer.university Thanks I tried that but it will only follow the cursor movement. What I am looking for is the component animating without doing any action. Think of it like a slider pf photos moving automatically. Hope I was able to explain. BTW you post great content. Keep up the good work!!!!
@@travelbeing_kannada oh I see. This component cannot be used for something like that. If you want to make it auto slide, you can create multiple variants of the carousel, where on each variant, it has a different Y rotation and you can switch between those variants with appear interactions.
Similar technique is used in this video framer.university/lessons/circular-3d-animation.
Can we make these cards clickable?
Ofc, you can make any element clickable in Framer. Just select it and add a link on the right panel.
Hey Nandi, great tutorial! is there a way to give the different images in the carousel a clickable link? Like scrolling to the image you are searching for then click it and getting direct to a new page?
Thanks for any help. 🤍
Yes you can! You can go into the image component and add a link to it. And turn that into a variable that you can set just like the image variable.