Creating an Interactive 3D Hero Section Without Coding

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ม.ค. 2025

ความคิดเห็น • 74

  • @worksmart8166
    @worksmart8166 6 หลายเดือนก่อน +15

    Now a days im a serious follower of yours.
    Can you teach about how to add
    1. Payment process on Framer
    2. Explanation about nested component
    3. Useage of form and mailchip
    4. E-commers or shopify with Framer
    5. I dont know about this component name but i explain, if we move something it will move and settle another place. Click carrom
    Please make these video❤❤❤

    • @feelcollins4358
      @feelcollins4358 6 หลายเดือนก่อน +1

      number 5 is a called drag-and-drop component

    • @LouisDole
      @LouisDole 6 หลายเดือนก่อน +1

      he already made a video about Forms and its useage 👍

  • @david_d-_-b_in
    @david_d-_-b_in 6 หลายเดือนก่อน

    Another awesome video, Nandi! I'm learning a lot with you. Thanks for this content! 👍

  • @mr.chinaski2613
    @mr.chinaski2613 6 หลายเดือนก่อน +1

    Just as awasome content as always!

  • @Sefko1995
    @Sefko1995 5 หลายเดือนก่อน +1

    More of this bro im really motivated by you

  • @HOLYBOY.
    @HOLYBOY. 6 หลายเดือนก่อน +7

    Please build a full 3d website

  • @Krizzoa
    @Krizzoa 6 หลายเดือนก่อน +1

    im loving the framer more than the webflow and why there are no any structured courses or playlist to follow from basics to advance please rearange the videos into a course like structure from basics to advance

    • @dushyantthakur4373
      @dushyantthakur4373 13 วันที่ผ่านมา +1

      hii

    • @Krizzoa
      @Krizzoa 13 วันที่ผ่านมา

      @dushyantthakur4373 hi

  • @matthewgibson8309
    @matthewgibson8309 6 หลายเดือนก่อน +1

    Awesome tutorial!

  • @notdoshi.1404
    @notdoshi.1404 6 หลายเดือนก่อน +2

    This is sooo coooll!!!🤯🤯🤯🤯

  • @McPhemmy
    @McPhemmy 4 หลายเดือนก่อน +2

    I’ve got an issue when I did the loop effect. The rotate orientation was bad. For that 3D rotation in Y axis, it was rotating in a straight stack instead of in that 3D curve effect. I really do hope you understand my explanation here😂

    • @EdwardAustin
      @EdwardAustin 4 หลายเดือนก่อน +1

      Same issue. Ever figure it out?

    • @McPhemmy
      @McPhemmy 4 หลายเดือนก่อน

      @@EdwardAustin Oh no! I’ve not. Have you been able to figure it out either? I tried everything possible but it wasn’t just working for me so I left it and I’m now focusing on some other tasks at the moment.

  • @simon.petrus.777
    @simon.petrus.777 5 หลายเดือนก่อน +1

    super amazing!!!!

  • @kencarter16
    @kencarter16 6 หลายเดือนก่อน +1

    Framer on top 😤

  • @worksmart8166
    @worksmart8166 6 หลายเดือนก่อน +1

    This is also awesome video like always🎉

  • @malcolmvanhilten125
    @malcolmvanhilten125 6 หลายเดือนก่อน +1

    Brilliant !

  • @-_SamsulHadi
    @-_SamsulHadi 6 หลายเดือนก่อน +1

    its realy cool nandy, nice work!🔥

  • @Nirperetz9
    @Nirperetz9 6 หลายเดือนก่อน +1

    First of all thanks. This is AMAZING!
    Second, If i want that when the user press the image it will make the background dark and the photo will scale big and normal, what would be the best and fast process of doing it? Thanks again you're the best in the framer field! :)

    • @framer.university
      @framer.university  6 หลายเดือนก่อน +1

      Thank you so much for the kind words mate :)
      Yes, this would be possible. You would need a more complex component structure with variants and interactions. I’ll explore this :)

  • @hadiskhalili8915
    @hadiskhalili8915 6 หลายเดือนก่อน +1

    Amazing😍🌸

  • @1982stevied
    @1982stevied 6 หลายเดือนก่อน +1

    Excellent Tutorial, is it possible to have the images clickable so you could click on one and it take you to a section lower down?

    • @framer.university
      @framer.university  6 หลายเดือนก่อน +1

      Yes! You can add scroll sections to sections on your site, and then link the cards to those sections. So on click it will take you down the page.

  • @javadobe-sol
    @javadobe-sol 6 หลายเดือนก่อน

    Amazing Nandi

  • @yashraut2355
    @yashraut2355 5 หลายเดือนก่อน +1

    1:37 sir please explain what have u done it would be great

    • @framer.university
      @framer.university  5 หลายเดือนก่อน

      I pressed ⌥ + ⌘ + Enter to wrap the frame in a stack.

    • @yashraut2355
      @yashraut2355 5 หลายเดือนก่อน

      @@framer.university sir I am new to framer can u elaborate a bit it would be great

    • @yashraut2355
      @yashraut2355 5 หลายเดือนก่อน

      ​@@framer.university siri am new to framer so can u elaborate a bit it would be great

    • @yashraut2355
      @yashraut2355 4 หลายเดือนก่อน

      ​@@framer.university sir I am new to framer please can u make a sperate long video for students like me who are unaware of the website feacture

  • @danherzl
    @danherzl หลายเดือนก่อน

    Nandi, thank you for this amazing tutorial, it gave me an interesting idea to complement my project. I thought about creating these animated cards, without too much of a 3D effect, but when hovering over the card, it would slightly increase in size and show a 'play' button in the center of the card. In the background of the HERO section, the background would activate a video with a certain opacity. So every time the mouse hovers over the card, the video would appear in the hero background. Imagine cards of tourist places with videos of those locations playing in the background. How can I do this?

  • @almighty.saumya
    @almighty.saumya 6 หลายเดือนก่อน +1

    I am folowing this tutorial however this problem at 10:03 -
    How do I copy this 3d component to my project file where I am following this tutorial ?
    (Edit) - Okay I figured it out. Once I drag it into the remix canvas I can copy from there.

    • @framer.university
      @framer.university  6 หลายเดือนก่อน +1

      Hey mate! Sorry I wasn’t clear. Glad u figured it out :)

  • @zairelrhawk5924
    @zairelrhawk5924 5 หลายเดือนก่อน +1

    Can you suggest me how can i put Videos in the image frames?..... really appreciate your feedback......your tutorials are always on the next level 👌👌

    • @framer.university
      @framer.university  5 หลายเดือนก่อน +1

      Thanks for the kind words :)
      You can grab the video component from the insert panel, and place it within the image frame, set it to absolute position, pin it to all sides with 0 value.

    • @zairelrhawk5924
      @zairelrhawk5924 5 หลายเดือนก่อน

      ​@@framer.universityThank you so much for your help! 🙌 I'm new to Framer, so I'm still getting the hang of things, but your instructions were incredibly helpful. 😊 Thanks a lot! Looking forward to seeing more amazing videos from your channel. 🎥✨

  • @thothomoto803
    @thothomoto803 6 หลายเดือนก่อน +1

    Thank you for this Video, but how does it behave responsiveness wise? how does it look or work on an iPhone?:)

    • @framer.university
      @framer.university  6 หลายเดือนก่อน

      works perfectly! check the demo on your phone :)

  • @rafafrances
    @rafafrances 5 หลายเดือนก่อน +1

    Just to let you know that you are become my mentor

  • @thothomoto803
    @thothomoto803 5 หลายเดือนก่อน +1

    Hello Nandi! First of all, thank you for all your framer tutorials!🙏 I wanted to ask if the pictures are or can be clickable? Can you link new pages to the pictures?

    • @framer.university
      @framer.university  5 หลายเดือนก่อน

      Hey hey! Thanks a lot for the kind words. Im glad my videos are helping :)
      Yes, in fact you can make any frame clickable in Framer. Just select the frame, go to the right panel, and towards the top, you'll see the link section where you can add the link.

    • @thothomoto803
      @thothomoto803 5 หลายเดือนก่อน

      respectively can i let the carousel rotate but still link the pictures to other pages? bit stuck here😅

    • @thothomoto803
      @thothomoto803 5 หลายเดือนก่อน +1

      @@framer.university Thanks for the fast respose:) I already tried to just link the pictures but unfortunately I think Framer does not handle to keep the colliders for the link in the right position while rotating? Are you sure it should work without any problems? Many Thanks in advance!!!

    • @framer.university
      @framer.university  5 หลายเดือนก่อน

      @@thothomoto803 yes you're right. in combination with this 3D look component, links might not behave as expected (also because of the heavy transform in 3D). in that case, i'm sorry to say to you might not be able to add links that are properly clickable to these images.

  • @DontBlinkZA
    @DontBlinkZA 4 หลายเดือนก่อน +1

    hi nandi, awesome stuff, i used your video and it work last night the next day i did one change to the the page and it broke, its like the whole 2D group is spinning on the y and not locked to it the same way, i have checked everything, watched your video 2 times and made it in other projects, possible framer made a change or something?

  • @SunriseOverEverest
    @SunriseOverEverest 6 หลายเดือนก่อน

    Diving into another great tutorial! Cheers! Nandi any chance for tutorial about page router with page transition like animation covering viewport with dedicated page title? Very popular recently... one more thing - your tutorial on page intro animation was great plus the cookies option...but if i have delayed animation in hero (after intro) there is nothing for that delayed time period (because of the cookie settings to not show in current session)... any workaround to shorten the delay if the cookie is present? AI doesn't really help in case of Framer restrictions.

  • @abhaykumar_v
    @abhaykumar_v 6 หลายเดือนก่อน

    Any way to do a horizontal scroll section?

  • @jazilatunnajwa-ku1ss
    @jazilatunnajwa-ku1ss หลายเดือนก่อน +1

    is it possible to make exactly like this on webflow?

    • @framer.university
      @framer.university  หลายเดือนก่อน +1

      you're asking under the wrong channel hahah. sorry, i really don't know.
      (use framer :P)

  • @adammann42
    @adammann42 6 หลายเดือนก่อน

    Any chance you could make a video about Interactions? It appears on the top of the side panel when I'm editing a component, but haven't been able to figure out how to use it, or even what it does. I can't find any documentation about it anywhere!

    • @framer.university
      @framer.university  6 หลายเดือนก่อน

      Hey! You can use it to connect different variants to animate between them on various triggers.
      Here's an intro to the feature (lmk if it helps):
      x.com/learnframer/status/1797642783685242963

  • @Spagget_
    @Spagget_ 6 หลายเดือนก่อน +1

    The carousel isn't visible after publishing the website. How can I fix this?

    • @framer.university
      @framer.university  6 หลายเดือนก่อน

      Have not encountered this issue. Did you follow every step?

  • @david_d-_-b_in
    @david_d-_-b_in 6 หลายเดือนก่อน

    One thing I noticed is the dragging direction is inversed from the original inspiring website. Is it possible to reverse the drag direction? I mean, right now we are dragging rowards left and the images move to the right.

  • @robertoazmitia6379
    @robertoazmitia6379 11 วันที่ผ่านมา

    Does this allow us to add more than 7 arms?

  • @BluezKlue
    @BluezKlue 4 หลายเดือนก่อน +1

    So I logged back in and it’s all messed up.. how does this happen lol

  • @MonHubTV
    @MonHubTV 6 หลายเดือนก่อน +2

    ❤❤❤

  • @moezusy
    @moezusy 6 หลายเดือนก่อน +1

    i run a cleaning business, how can i implement this to my website, its so cool

    • @framer.university
      @framer.university  6 หลายเดือนก่อน +1

      Follow the tutorial and remake it on your site.
      You can find a remix link in the description.

    • @suhailmalik6785
      @suhailmalik6785 6 หลายเดือนก่อน

      I can do this for you