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.
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.
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...
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
@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?
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. 😃
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2Mvmz34QsLQ.html
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?
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 ☺️👌
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0SzJOMS0RPA.html
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.
But can I make the scroll interaction with Figma because I see it can work with Framer? or just only can do 'Drag'? I want to make a prototype where something changes when user scrolls content. I want to keyboard collapse when user starts scrolling content, but it’s impossible to do with drag action. Or it feels unnatural Or am I missing a way to do it with existing tools?
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!
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!
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.
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 ?
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?
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 ☺️
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!
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...
