Framer Trick: Convert 2D Elements into Interactive 3D Objects

🎓 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

Пікірлер: 32

  • @vaanresvaanica
    @vaanresvaanica2 ай бұрын

    Your tutorial format and content is gettting better day by day. Can you make a tutorial how did you make component 3D Look?

  • @framer.university

    @framer.university

    2 ай бұрын

    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:)

  • @kreativethinker5987
    @kreativethinker59872 ай бұрын

    You're the best out there nandy. If I search for a great animation tut my first thought is to check nandy's page :)

  • @framer.university

    @framer.university

    2 ай бұрын

    appreciate you so much!!

  • @robertbillingse

    @robertbillingse

    18 күн бұрын

    Couldn't agree more. Great stuff Nandy.

  • @ozenuaoluwatobi
    @ozenuaoluwatobi2 ай бұрын

    You're so great at this

  • @framer.university

    @framer.university

    2 ай бұрын

    💙💙 Thank you so much!

  • @achrafelothmani8236
    @achrafelothmani82362 ай бұрын

    i love your work brother

  • @framer.university

    @framer.university

    2 ай бұрын

    Thank you so much mate :)

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

    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?

  • @bhagyalakshmi-gv2hg
    @bhagyalakshmi-gv2hg25 күн бұрын

    Hi..im new to framer and im learning..this has helped a lot..Thank you

  • @kreativethinker5987
    @kreativethinker59872 ай бұрын

    nandy, do you have any tutorials on how to make transitions going from one section to another. I'm really stuck with that.

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

    Hi! i was wondering if there's a way to set this up to interact with the CMS and change number of images dynamically? although this probably needs a totally different approach...

  • @basharalhussain
    @basharalhussain2 ай бұрын

    🤩

  • @Im_IntoDev
    @Im_IntoDev2 ай бұрын

    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!

  • @framer.university

    @framer.university

    2 ай бұрын

    By using screen studio for recording.

  • @ok_roman
    @ok_roman2 ай бұрын

    In last part, how do you make it follow cursor? Is that a code override?

  • @framer.university

    @framer.university

    2 ай бұрын

    I just disable dragging in the component. Lemme know if you can find that setting!

  • @worksmart8166
    @worksmart81662 ай бұрын

    Watching your old videos and this video comes out🎉🎉 do you hv linkedin

  • @framer.university

    @framer.university

    2 ай бұрын

    I don't have linkedin. I hope u like this vid :)

  • @-_SamsulHadi
    @-_SamsulHadi2 ай бұрын

    very nice!! can we create a custom draggable carousel?

  • @-_SamsulHadi

    @-_SamsulHadi

    2 ай бұрын

    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?

  • @travelbeing_kannada
    @travelbeing_kannada2 ай бұрын

    This is aweseome! How do you make it autoplay?

  • @framer.university

    @framer.university

    2 ай бұрын

    Thank you so much :) Autoplay?

  • @travelbeing_kannada

    @travelbeing_kannada

    2 ай бұрын

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

  • @framer.university

    @framer.university

    2 ай бұрын

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

  • @travelbeing_kannada

    @travelbeing_kannada

    2 ай бұрын

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

  • @framer.university

    @framer.university

    2 ай бұрын

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

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

    Can we make these cards clickable?

  • @framer.university

    @framer.university

    Ай бұрын

    Ofc, you can make any element clickable in Framer. Just select it and add a link on the right panel.

  • @LouFTMKZ
    @LouFTMKZ2 ай бұрын

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

  • @framer.university

    @framer.university

    2 ай бұрын

    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.