3 Award Winning Website Animations (Figma Tutorial)

In this tutorial we use Figma's smart animate feature to recreate 3 amazing, award winning animations.

Timecodes
00:00 Intro
00:37 Animation 1
06:07 Animation 2
11:00 Animation 3

#figma #figmatutorial

➡️ QUESTION — Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video—I’m happy to answer!

[jackieqiu]

This is absolutely brilliant! Appreciate how you go step by step and explain the process so beginners can understand

[mr.chinaski]

Can't get enough of your videos - just using Framer for a few days with Figma combined an it's a whole new dimensiom of UI/UX

[AnnaOlchawska-pk]

Hi Tim! Huge thanks for all the materials you prepare. They are very valuable.
If you want to simulate the video in the free Figma plan, you can turn it into a gif and put it as a background. In the prototype it will move.

[workmail]

God damn what a hunky man! Riktigt bra ljussättning/toner på videon 👏🏻👏🏻

[nickhukriede]

I am just starting my web design journey and your videos have been super helpful to boost my learning curve early on. Thanks!

[zahradeljooee]

Thank you for sharing these videos.They are very very very useful.

[AllenCenteno]

Hi Gabe! Thanks for another awesome tutorial! ❤
I was wondering how to apply these animations to actual website but then I think I have the answer

[muhidulhasan]

Cant thank you enough for these animation tutorials . You are the best

[jojodesigns]

Another great tutorial thanks Tim! Would love to see how to create these in Framer :)

[HikaruAkitsuki]

Do it in Figma is on thing. But coding it is different story. You gonna end up using GSAP and other helper in JS.

[samuelayodeleadeoye]

Your videos are absolutely amazing and has helped me so much, thank you. can you as pls try to move your mic closer to you, i dont have an headset and its sometimes difficult to hear you.

[yeminhtun]

you are a master!!
Thanks a lot for these tutorials!!!

[mainms]

Love it! Thank you somuch for sharing🤩🙏

[stephenaaronosborn]

Love the videos. One question, on the second animation could you explain the masking you did to change the black text to white? I saw you grouped the two different text colors but didn’t see how the mask was defined so that when the text was dragged over(or under) the image.

[christiannavarro]

Love your awesome tutorial, and high quality content in every video you make.

[jhinjhin_]

hello, love the step by step explaination!, just one question, are none of these possible without the scrollbar?

[aquiyahdesigns]

This is really insightful and educative. Thank you for teaching them.

[tomashudolin]

Great, but I think make this live is another and I think harder part. I am always curios how to develop this kind of animations.

[davidpiercetuttle]

Phenomenal! I have a site I've designed using Divi for Wordpress that I would like to add some of these animations to, specifically the 2nd example, any idea or other videos explain how to do this in Wordpress? Thanks!

[davecelot]

Hello there Tim!

I love how you're always doing amazing things and sharing the process. It's so cool how big things seems to be easier when you explain.

Thanks!