Framer Tutorial: Creating a 3D Text Scroll Animation
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this tutorial, you'll learn how to create 3D text scroll animations in Framer.
I'll show how to structure your layers and set 3D transforms to achieve a whole 3D tube made of text.
I'll also show how you can animate those 3D transformations so you get a nice scroll animation.
With the help of this video, you'll be able to create stunning 3D text animations on your Framer websites, without writing any code.
3D Transforms Crash Course:
framer.university/lessons/fra...
Scroll Animation Technique Tutorial:
framer.university/lessons/beg...
3D Text Project Remix:
framer.university/resources/3...
00:00 - Introduction
00:17 - 3D transforms crash course
01:10 - Making the front and the back
05:30 - Creating the wrapping frame
07:23 - Creating a full 3D tube
09:39 - Adding perspective distortion
10:30 - Animating the 3D transforms
15:25 - Bringing it closer to us
16:02 - Extra customization
17:21 - Additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
Пікірлер: 31
I can't believen how Framer evolves weekly.
@ShayneCuffy
3 ай бұрын
💯
@framer.university
3 ай бұрын
hard to keep up, not gonna line!
@mr.chinaski2613
2 ай бұрын
@@framer.university Somehow my final form is not like yours even if I continued your video step-by-step, can you share the remix version?
@framer.university
2 ай бұрын
@@mr.chinaski2613 it's in the description! 🫶
You are soooo happy with these 3d transforms aren't ya 🎉
@framer.university
3 ай бұрын
you know meee!!! :)))
Awesome content Nandi, thanks for sharing.
@framer.university
3 ай бұрын
Glad you liked it 🫶
i cannot thank you enough brother, always putting out great content
@framer.university
3 ай бұрын
Thank you so much for the support 🙌
🤯 there goes my weekend 😁👏🏾
@framer.university
3 ай бұрын
have fun, bud! :)
amazing tutorial! Thanks for sharing this 💎
@framer.university
3 ай бұрын
Happy to hear this :)
Very goooood
@framer.university
2 ай бұрын
Thanks :)
Love your work!!! Thanks you so much for all you do for us. I would love to see a mouse move (background) animation tutorial!
@framer.university
3 ай бұрын
Appreciate you! Check this: framer.university/resources/parallax-hover-interaction-in-framer
Bro when is Framer University course is coming👀
@framer.university
3 ай бұрын
courses coming this year, mate! stay tuned! :)
Can you please make a video about trigger states? When component is clicked i want something else to appear on different stack or frame, and not necessarily on same place..
@framer.university
3 ай бұрын
Elements involved in the same interactions have to be within a same component.
So is the text in "Sticky " frame?
@framer.university
Ай бұрын
Yes within that.
Sir i want to learn framer from scratch but i am confused that how to start as my first step🤔
@framer.university
3 ай бұрын
I’ll soon release beginner courses that will help learn from scratch.
I just heard Framed University and O enrolled with a Sub 😂 I'm a Figma main but knowledge of Framed is a Big Plus for me
@framer.university
3 ай бұрын
I'm also coming from Figma. For me, the biggest "wow" moment was when I realized I can design my website exactly how I'd design them in Figma, but then hit publish at the end and have a live site on the internet instead of a PNG in Figma.
I was hoping this was actually a full 3D object. In this case a cylinder that you can just map the text to it. then set transparency etc - ohh well... still pretty cool
@framer.university
3 ай бұрын
I'm glad that you wrote "still pretty cool" at the end, because it is still pretty cool haha. Framer is still not a 3D modeling software of course, but if we use the features in a smart way, we can achieve these pretty results.