Тёмный

Framer Tutorial: Creating a 3D Text Scroll Animation 

Подписаться
Просмотров 4,2 тыс.
% 154

🎓 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/framer-3d
Scroll Animation Technique Tutorial:
framer.university/lessons/beginner-scroll-animations
3D Text Project Remix:
framer.university/resources/3d-card-flip-interaction-in-framer
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

Опубликовано:

 

26 апр 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 31   
@mr.chinaski2613
@mr.chinaski2613 2 месяца назад
I can't believen how Framer evolves weekly.
@ShayneCuffy
@ShayneCuffy 2 месяца назад
💯
@framer.university
@framer.university 2 месяца назад
hard to keep up, not gonna line!
@mr.chinaski2613
@mr.chinaski2613 Месяц назад
@@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
@framer.university Месяц назад
@@mr.chinaski2613 it's in the description! 🫶
@josepdevillaret
@josepdevillaret 2 месяца назад
You are soooo happy with these 3d transforms aren't ya 🎉
@framer.university
@framer.university 2 месяца назад
you know meee!!! :)))
@lydiawere
@lydiawere 2 месяца назад
Awesome content Nandi, thanks for sharing.
@framer.university
@framer.university 2 месяца назад
Glad you liked it 🫶
@achrafelothmani8236
@achrafelothmani8236 2 месяца назад
i cannot thank you enough brother, always putting out great content
@framer.university
@framer.university 2 месяца назад
Thank you so much for the support 🙌
@fliich
@fliich 2 месяца назад
amazing tutorial! Thanks for sharing this 💎
@framer.university
@framer.university 2 месяца назад
Happy to hear this :)
@user-ii7gp3sb6h
@user-ii7gp3sb6h 2 месяца назад
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
@framer.university 2 месяца назад
Appreciate you! Check this: framer.university/resources/parallax-hover-interaction-in-framer
@ShayneCuffy
@ShayneCuffy 2 месяца назад
🤯 there goes my weekend 😁👏🏾
@framer.university
@framer.university 2 месяца назад
have fun, bud! :)
@MACH_SDQ
@MACH_SDQ 2 месяца назад
Very goooood
@framer.university
@framer.university 2 месяца назад
Thanks :)
@Cvrchak88
@Cvrchak88 2 месяца назад
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
@framer.university 2 месяца назад
Elements involved in the same interactions have to be within a same component.
@adityarajpandey7167
@adityarajpandey7167 2 месяца назад
Bro when is Framer University course is coming👀
@framer.university
@framer.university 2 месяца назад
courses coming this year, mate! stay tuned! :)
@emmylegend5442
@emmylegend5442 2 месяца назад
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
@framer.university 2 месяца назад
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.
@DancewithAaditya
@DancewithAaditya 2 месяца назад
Sir i want to learn framer from scratch but i am confused that how to start as my first step🤔
@framer.university
@framer.university 2 месяца назад
I’ll soon release beginner courses that will help learn from scratch.
@marikochan_
@marikochan_ 29 дней назад
So is the text in "Sticky " frame?
@framer.university
@framer.university 28 дней назад
Yes within that.
@elysiumcore
@elysiumcore 2 месяца назад
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
@framer.university 2 месяца назад
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.