Framer Tutorial: Epic 3D Website Animation Without Coding

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this tutorial, you'll learn how to create a stunning 3D card animation in Framer.
I'll show how to structure your layers and set 3D transforms to achieve a whole circle of cards.
I'll also show how you can turn this object into a component and add variants to it to spice up the animation.
Original animation:
/ 1782748524066586892
3D Transforms Crash Course:
framer.university/lessons/fra...
Project Remix:
framer.university/resources/3...
00:00 - Introduction
00:56 - Creating an arm
05:24 - Making a full circle of cards
07:55 - Turning it into a component
10:03 - Adding variants and interactions
22:54 - Publishing the website + final result
23:47 - Additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university

Пікірлер: 42

  • @jarosoho2049
    @jarosoho20492 ай бұрын

    Great content Nandi. I really appreciate your calm demeanor - so sick of being yelled at by KZread. Thank you 🙏🏽

  • @framer.university

    @framer.university

    2 ай бұрын

    I’m glad you enjoy the content :) Appreciate your feedback 🫶

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

    You're my Framer Angel! 😇🪽🥰

  • @framer.university

    @framer.university

    Ай бұрын

    💙💙

  • @hypericron
    @hypericron3 ай бұрын

    You really are the G.O.A.T. WOW. It's truly amazing.

  • @framer.university

    @framer.university

    3 ай бұрын

    I try my best! Thanks a lot for the support 🫶🫶

  • @mt000mp
    @mt000mp3 ай бұрын

    THIS IS WHY YOU'RE THE G.O.A.T !!!! THE G.O.A.T !!!! amazing.

  • @framer.university

    @framer.university

    3 ай бұрын

    thanks you so much for the support 🫶🫶🫶

  • @koenbok3762
    @koenbok37623 ай бұрын

    This is beautiful!

  • @framer.university

    @framer.university

    3 ай бұрын

    appreciate ya, Koen! thanks a lot :))

  • @NateSwanni
    @NateSwanni3 ай бұрын

    Amazing!! thank you so much

  • @framer.university

    @framer.university

    3 ай бұрын

    Glad you like it!

  • @puseletsomaraba1313
    @puseletsomaraba13132 ай бұрын

    Mastery 🎉thank you for your helpful quality content

  • @framer.university

    @framer.university

    2 ай бұрын

    Happy to help 🫡

  • @rayyananugerah4900
    @rayyananugerah49003 ай бұрын

    U R ABSOLUTELY GENIUS. THANK YOU SIR

  • @framer.university

    @framer.university

    3 ай бұрын

    I try my best :) happy to help!!

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

    nice work sir

  • @framer.university

    @framer.university

    3 ай бұрын

    thanks sir!! :)

  • @AkinsRealm
    @AkinsRealm2 ай бұрын

    Another great tutorial, will watch the whole thing. By the way, you don't need to use a separate calculator, you can do math in text fields in most apps (tried in Framer, and it works there too, just typing into transform angle box 360/12 etc Edit: and I see you do that as well in the video at a later time 😄👍 :)) But I also learnt from this video you can do math in spotlight search box in mac (cmd-space), so thank you for all the info 🙌

  • @framer.university

    @framer.university

    2 ай бұрын

    Appreciate your comment:) i'm glad you liked the video 🫶

  • @ruddro29
    @ruddro293 ай бұрын

    man.... you are awesome...keep rocking bro 👏

  • @framer.university

    @framer.university

    3 ай бұрын

    Thank you so much 🫡 I’ll keep posting 🤝

  • @irshad7895
    @irshad78953 ай бұрын

    Brilliant 😍

  • @framer.university

    @framer.university

    3 ай бұрын

    appreciate it, man! :)

  • @josepdevillaret
    @josepdevillaret3 ай бұрын

    I'm amazed by your consistence 🚀

  • @framer.university

    @framer.university

    3 ай бұрын

    consistency is everything 🫡

  • @josepdevillaret

    @josepdevillaret

    3 ай бұрын

    @@framer.university That's what they say 😏

  • @Ellijarkas
    @Ellijarkas3 ай бұрын

    you are the best

  • @framer.university

    @framer.university

    3 ай бұрын

    ahh don't be too kind :)

  • @WhaleMarketingCanada
    @WhaleMarketingCanada2 ай бұрын

    Hey Nandi, This is BeautifuI 🤩! noticed on mobile though, its a little jittery, is there any way to fix that?

  • @user-so4oe9jz9q
    @user-so4oe9jz9q2 ай бұрын

    This is amazing! I tried to recreate this independently, and the only issue I've faced is the transition rotate preserve in Safari. Can't fix the glitches. Does anyone know, how to fix it?

  • @AnveshLambe
    @AnveshLambe3 ай бұрын

    For me, Other KZreadr ❌ Framer University ✅

  • @framer.university

    @framer.university

    3 ай бұрын

    🫶 thanks for the support, Anvesh!

  • @businessmarketingskills214
    @businessmarketingskills2142 ай бұрын

    Also if u can help 😢 I have a carousel component with cards stacked on top of each other in Framer. When I try to change the positions of these cards in different variants, the changes apply to all variants instead of just the one I’m editing. How can I isolate changes so that modifying the positions of cards in one variant doesn’t affect the other variants? Thanks!

  • @businessmarketingskills214

    @businessmarketingskills214

    2 ай бұрын

    In discord nobody answers my questions (

  • @PavanKumar-fr2ig
    @PavanKumar-fr2ig3 ай бұрын

    G.O.A.T

  • @framer.university

    @framer.university

    3 ай бұрын

    💙💙

  • @businessmarketingskills214
    @businessmarketingskills2142 ай бұрын

    nice video! but how to adjust it to different screen sizes :D

  • @framer.university

    @framer.university

    2 ай бұрын

    yes of course, you can make different components with different sizes for different breakpoints. and just show and hide them on breakpoints

  • @businessmarketingskills214

    @businessmarketingskills214

    2 ай бұрын

    @@framer.universityalso different question -- I have a carousel component with cards stacked on top of each other in Framer. When I try to change the positions of these cards in different variants, the changes apply to all variants instead of just the one I’m editing. How can I isolate changes so that modifying the positions of cards in one variant doesn’t affect the other variants? Thanks!

  • @atharwadeodhar5937
    @atharwadeodhar59373 ай бұрын

    Firstt!!!!!

  • @framer.university

    @framer.university

    3 ай бұрын

    🫶🫶