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
Great content Nandi. I really appreciate your calm demeanor - so sick of being yelled at by KZread. Thank you 🙏🏽
@framer.university
2 ай бұрын
I’m glad you enjoy the content :) Appreciate your feedback 🫶
You're my Framer Angel! 😇🪽🥰
@framer.university
Ай бұрын
💙💙
You really are the G.O.A.T. WOW. It's truly amazing.
@framer.university
3 ай бұрын
I try my best! Thanks a lot for the support 🫶🫶
THIS IS WHY YOU'RE THE G.O.A.T !!!! THE G.O.A.T !!!! amazing.
@framer.university
3 ай бұрын
thanks you so much for the support 🫶🫶🫶
This is beautiful!
@framer.university
3 ай бұрын
appreciate ya, Koen! thanks a lot :))
Amazing!! thank you so much
@framer.university
3 ай бұрын
Glad you like it!
Mastery 🎉thank you for your helpful quality content
@framer.university
2 ай бұрын
Happy to help 🫡
U R ABSOLUTELY GENIUS. THANK YOU SIR
@framer.university
3 ай бұрын
I try my best :) happy to help!!
nice work sir
@framer.university
3 ай бұрын
thanks sir!! :)
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
2 ай бұрын
Appreciate your comment:) i'm glad you liked the video 🫶
man.... you are awesome...keep rocking bro 👏
@framer.university
3 ай бұрын
Thank you so much 🫡 I’ll keep posting 🤝
Brilliant 😍
@framer.university
3 ай бұрын
appreciate it, man! :)
I'm amazed by your consistence 🚀
@framer.university
3 ай бұрын
consistency is everything 🫡
@josepdevillaret
3 ай бұрын
@@framer.university That's what they say 😏
you are the best
@framer.university
3 ай бұрын
ahh don't be too kind :)
Hey Nandi, This is BeautifuI 🤩! noticed on mobile though, its a little jittery, is there any way to fix that?
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?
For me, Other KZreadr ❌ Framer University ✅
@framer.university
3 ай бұрын
🫶 thanks for the support, Anvesh!
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
2 ай бұрын
In discord nobody answers my questions (
G.O.A.T
@framer.university
3 ай бұрын
💙💙
nice video! but how to adjust it to different screen sizes :D
@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
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!
Firstt!!!!!
@framer.university
3 ай бұрын
🫶🫶