3 Award Winning Website Animations (Figma Tutorial)
Вставка
- Опубліковано 9 лип 2024
- In this tutorial we use Figma's smart animate feature to recreate 3 amazing, award winning animations.
🔴 Working File: timgabe.com/resources/figma-a...
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!
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
This is absolutely brilliant! Appreciate how you go step by step and explain the process so beginners can understand
thank you so much Jackie! 😃
God damn what a hunky man! Riktigt bra ljussättning/toner på videon 👏🏻👏🏻
you’re the hunk, Alfred!! tack min vän 💜
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!
that makes me so happy to hear, Diego 🤩 thank you so much for the kind comment!!
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.
that's a great hack, thanks!!
I am just starting my web design journey and your videos have been super helpful to boost my learning curve early on. Thanks!
I love hearing that, Nick!! thank you for sharing this with me 🥳
Cant thank you enough for these animation tutorials . You are the best
Muhidul, that's so nice of you to say. thank you, my friend! 🤩
Thank you for sharing these videos.They are very very very useful.
happy you found it useful, Zahra!! 🤩
Love your awesome tutorial, and high quality content in every video you make.
that's amazing to hear, Christian!! thank you so much for the support, my friend 🥳
Love it! Thank you somuch for sharing🤩🙏
thank you for commenting! 🤩
This is awesome! Thanks
happy you like it Siddharth!
@tim gabe thanks for the tutorial. Is it possible to collate all of these frame animation into a single component, and convert each frame into variants? Then the scroller + interaction is kept on the desktop frame and have it manipulate an instance of that component?
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
hey!! i think the best way to make these kinds of animations into reality is to export it over to framer
This is really insightful and educative. Thank you for teaching them.
happy to help!! 😃
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.
You might have figured it out already, but just in case: he used the clip content feature on the container to basically act as a mask.
Love your videos man! ❤️❤️
that’s so so nice to hear!! thanks for sharing 💜
you are a master!!
Thanks a lot for these tutorials!!!
happy that I can be of help, Ye! thanks a lot for commenting!!
Do it in Figma is on thing. But coding it is different story. You gonna end up using GSAP and other helper in JS.
code is always a different story (unless you cheat and use something like framer or webflow)
Another great tutorial thanks Tim! Would love to see how to create these in Framer :)
great idea!! will be doing more cool animations in Framer! 😃
Thank you ❤️
thanks for supporting, Moayad! 💜
Great video! You are an absolute legend! I have question. If I'm design mobile app and i want to use this animation as part of already existing frame? Can i create it as component ?
awesome!!!
happy you liked it Agata!! 🤩
Hi Tim, love your videos, they're super helpful and a great source for design inspiration! After watching this, I decided to try and recreate the second animation from this video into a project I'm working on in Webflow! Do you have experience with Webflow or any general thoughts on that design platform?
hey Sana! so cool that you’re trying it out in Webflow. I personally used to use Webflow a lot, but now that Framer has entered the scene I’m doing more stuff in that software because of the overall designer friendly UX ☺️
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.
i think i'm doing a better job at this lately! thank you!!
hello, love the step by step explaination!, just one question, are none of these possible without the scrollbar?
everything is possible without the scroll bar per se, you'll just have to have a different scroll target 😃 but you can't have it be an actual scroll though...
Hello. Great video. But will the animation work as prototype or until you send it to the developers?
why is my scroll bar not draggable? 😭 the effect shows however I do not have the control to drag it up and down 😔. if I drag it the slightest bit, it goes way back up.
PLEASE more vidslike this
animation videos? 😃 happy you liked it!!
From where to i insert the hand for apple magic animation?
You can make a gif out of the video and then use the gif as an image in the background of the "Drive" text. It will have a video effect.
I actually did this originally, but it didn't render nicely... but could be a great addition with the right GIF size 😃
but like if we're using 3-4 frames like the last one ; how would we implement the scrollbar with it mine isnt working fine :(
what's the original font used in DRIVE website?
how do you set that on a web sever , on a hosting ?
Question! What are the ways to export this without to subscribing to anything? Is screen recording the entire animation is the only way to export it in video form?
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!
not familiar with Divi or Wordpress, David... sorry! 😔
I think main reason they are the top sites because these animaiotns are coded.
the cool thing is that you actually can achieve many of them in a tool like Framer!
Stellar work like always. I grow so much under yours tutorials man! I had a question tho. Can we animate in Figma everything that we can also do in CSS? I recently find out CSS tutorial named "Create a cool color-fill animation with CSS" and I have no idea how to replicate this in Figma. Is this even possible? It also was made on masks sooooo meaby? :)
I think you can replicate a lot of things in Figma, but sometimes the animation engine can't handle it without being a bit janky. 😃 not sure about that particular effect, but if it's just a color fill I think it's very doable with masks as you're suggesting yourself 🥳
@@TimGabe Thanks man! I'll try to replicate this in Figma then. Thanks for encouraging me tho! Wish me luck! Till the next time! :) I'll tell you if I was able to replicated this probably under your's next turorial! :D
I have a question in my mind. Though your are building this animation in figma software but the final result will came throughout building this into code.
sometimes It can be difficult to make some animation into code. is there any way to get this animating into pre-build code which I can use in my real website?
this sounds like a great video topic, my friend!! will add it to my list 😃
Are you able to export these animations to Webflow using Lottie to have it be interactive on a live site?
with the correct setup, i believe you could do that with the lottie plugin!
not sure though, have never tried 🙏
Amazing! Thank you. So imagine if I would want multiple (different) animations. How do I make sure to get them in the same framework?
What I’m trying to say is how can I connect different type of animation like this in the same artboard?
you would have to use something called "interactive components" -- basically creating components that have animations between their variants, and then adding them to your frame/artboard of choice. 😃
check out this tutorial to understand it better:
ua-cam.com/video/2Mvmz34QsLQ/v-deo.html
Amazing. Do you know how to do animation 2 on Webflow? How would you technically call that effect? Thanks Tim!
hey!! i personally use Framer -- and in there all of those are possible to recreate.
check out my Framer tutorials if you're interested! 😃
Thanks for the reply! How do you do it in framer? do you have a tutorial for that kind of animation? @@TimGabe
How to make the scrollbar interactive? I've watched it 10 or more times and is not working as here :(
you have to have the interaction target to 1) be the actual scrollbar (so you target the scrollbar once you're in the prototype tab) and then 2) you have to move the position of the scrollbar in the next frame. 😃
Will these animations translate over if you import figma into editor X?
I’ve never used editor X, so I can’t speak to that. 😩
When I click a link in Figma, such as a "Contact" link that leads to a different page, I have noticed that the new page doesn't automatically open at the top of the canvas. Instead, it opens in the position where your cursor was located on the previous page. This behavior can be frustrating and make it difficult to navigate between pages in the design. Please Help me out.
I don’t encounter that kind of issue a lot myself so cannot speak to the exact problem, but what I’d probably do is use shift + 1 and 2 to zoom out to the full canvas and into the specific frame quickly ☺️👌
figma still doesn't support scroll interaction?
Btw Keep Going,Tim 🔥
although powerful, the animation tool is still limited in some cases! I'm hoping they will make it a bit more sophisticated in the future 🙏
thanks for the support, my friend!
hello tim how can i upload my animated figma into website or how to convert it into code
Hey my friend!! I’d suggest you look into Framer. 🙏 I have videos on it on my channel and this is a pretty good intro: ua-cam.com/video/0SzJOMS0RPA/v-deo.html
Figma is one thing, coding it another
definitely! and then we have tools like Framer...
@@TimGabe which is crap
@@thevikingsock8527 i love it 🥳
So you don't need a pro plan as a professional designer? I am a beginner and was considering buying one.
I only ever had upgraded plans for the organizations I've worked for, so you're definitely fine without it as an individual 😃
ok I made animation, the question is how I integrate it in a website flow
check out my tutorials on Framer; a pretty awesome website builder for us people coming from Figma!
Great content but hard to hear your voice. :(
thanks for the feedback, friend!!
on drag is not working lmao
hmmm, that's weird! should be working if you follow the steps
Why you create frame into an existing frame? How does this help the design?? I Don t really get it...
frames can be used to mask content, so depending on how you want to mask things using another frame can be helpful ☺️
Frames are much better than groups especially for the auto layouts
is this possible in Framer? bingeing your videos, subbed!
super duper possible!! 😃
how can i insert this to my main flow in my figma - and actually show the interactions within the prototype .... when i try to do it it just sends me towards a whole new frame ...... idk if this makes sense...