It's cool but is it possible to create the event On Drag to work as On MouseWheel event when it's related to desktop apps and websites designed for desktop...
Hey Tim, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you to grow your business faster.
I dont know why, but the animation that I got was different, following each of your steps. It seems fade, it is a problem with my preview or something?
Thanks so much for breaking it down for easy understanding. 😘 I'm new to uiux and using your teaching to design, it's like I've known it since forever. Thanks so much kind heart, I'm definitely watching all your videos to learn more. 😊
What do I need to do to scroll the page horizontally. Is there a name for this? The user will scroll down but the page will move sideways. It's an L-shaped design. I'd be very happy if you could help.
This tutorial is really useful, thank you! Wonder if there's a way that we can just preview this animation by only scrolling without dragging the scroll bar?
i have one doubt, i'm new to this so... yea. as far as i understand Figma is a prototyping tool right? meaning, it can throw CSS code but not HTML and least of all JS. so, what is the benefit of doing this cool animations if Figma if you cannot export all of this into an actual website? or can you? As I said, im new into this but I still struggle to understand what Figma does if it cannot make actual interfaces to work. thanks!
hey Bruno! Figma is a pure design tool, allowing you to craft your design visions and if necessary even prototype/animate them. when it comes to the prototyping/animation feature, I just see it as a great way to communicate design ideas to your developers 😃
Love the video. Thank you. I am trying to achieve the same effect for my website design, but is there any way to achieve it with mouse wheel scroll or touchpad gestures.
How exactly does it work the way it does? Why do the images come down from outside the frame when you scroll and how do they move like that when you scroll? And how do you create the scroll and make it scroll? Can you make it scroll left and right?
its paid only, there is no way to use it free. i don't have that much money to buy that. anyone please give me the activation code please!!!!!!!!!!!!!!!
Thank you for the video.I have done this but on a larger scale, creating a vertical with many elements. Now I ran into two problems. First not seeing the layer that leave the frame is kind of making it hard to stay in control of the animation. Second the loading time is so long that i basically cant work like this. Suggestions? Thank you :)
In order to see the layer that is outside the frame, you can simply unclick the "Clip content" of the particular frame and adjust the elements accordingly
@@TimGabe I will be looking forward to that......please more videos on component and interaction more also animation please......you videos are very helpful to me
I think it was from Dafont if I remember correctly… not by the computer atm so can’t give the proper attribution. check the file, Google it and you’ll find it 😃👌
So I was trying to resize the frame after i was done changing the position of the elements the elements and everything started to move to. How do i fix that?? Do i have to apply constraints to all the elements??
Tim, I recently discovered your channel and finished the Figma crash course in 2 days. I can not even tell you how helpful and insightful your videos are. I have learned the things in two days which I could not do in past 7-8 months. Your way of teaching is exceptional. 😍😍😍 I generally never comment on any video on UA-cam, but your content is worth it. I am super grateful to find your channel. Please upload more content on a full website design with complex interactions. Looking forward for more amazing content 🌺🌻
I am trying to combine this effect with Parallax with simple animations for certain objects but it seems like i can only do one or the other. I added a scroll bar like your video and was able to get a rocket ship image to move as i move the scroll bar down, but when i get to the bottom of the page there is an animation that is based on "on hover" and does not happen unless i take my mouse off of the scroll bar and hover over the page, only then does the animation happen. Is there a way to combine these two? Can I make it so i can vertically scroll on the page without a scroll bar have the parralax effect like in your video but also trigger an on hover effect?
@alex maybe you can try putting that hover animation within a component positioned in the footer, then use Mouse Enter on the component’s instance? The component would have at least two variants for your animation: start and end sequence?
you broke this down so perfect and easy to understand thank you
happy to help man!
It's cool but is it possible to create the event On Drag to work as On MouseWheel event when it's related to desktop apps and websites designed for desktop...
OMG! It's amaizing! Thank you soooooo much!
glad you liked it Nina!!
Also fantastic! Maybe you have time to show us how you do fancy page transitions 🔥🔥🔥
that’s a cool idea!! thanks a lot for sharing 😃🤩
how can i do this without using to drag scroll
transforms each screen into frames, then into components, and adds the "mouse enter" interaction
Using requestanimationframe
Awesome and pretty useful, thanks a lot!!
appreciate it, Melanie!! thanks a lot 🥳
Hey Tim, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you to grow your business faster.
hey Muhammad! appreciate you reaching out 😃 currently I'm not in need of any help with the editing parts, but thanks for asking! 🙏
@@TimGabe please let me know when you need.
Thanks
bro can u make a video on different animation styles in figma
not doing videos on figma specifically atm, but if you're into framer i have a bunch!
I dont know why, but the animation that I got was different, following each of your steps. It seems fade, it is a problem with my preview or something?
did you manage to solve it, Roberto?
How to make a blur?
just add a layer blur in the effects panel in the right sidebar 😃
@@TimGabe thanks a lot😉
You're a life saver man, got stuck in a freelance project and your tutorial is super handy!!!!!
that's amazing to hear, Sharanya! thanks a lot!! 😃
Is it also possible to create this scrolling effect only by using mouse wheel?
I was wondering the same. But as it is actually a drag interaction and not a scroll, I guess it does not work for now?
Like always, dude, you're an amazing teacher. I would never figured this myself!
And figma files included, thanks! Honestly, thanks man!
thank you Piotr, whenever I get feedback on my teaching abilities it makes me feel super happy. 🙏☺️
Hi I was watching the nested components video and it just vanished and is now private...may you help?@@TimGabe
@@malcommiya5940 my friend! it’ll be released next week, mistake by me to release it early 😅
thats not a scroll interaction, thats a drag interaction - deceptive title.
very true... unfortunately, you can't achieve a real parallax scroll animation in Figma!
Absolutely right. But this is for beginners, so it's not of a big deal.
Thanks so much for breaking it down for easy understanding. 😘
I'm new to uiux and using your teaching to design, it's like I've known it since forever.
Thanks so much kind heart, I'm definitely watching all your videos to learn more. 😊
really happy to hear that, thank you for commenting 😃
God, is so easy, but I ever try make with mouse scroll, never thinked make with "on drag". You can tell me if can use on mouse scroll just?
right?! unfortunately this is the only way as of now 😫
Users usually scroll not by dragging, so how to do this scrolling ?
Where I see Tim new film in notifications. Always click 🔥💪😊
Christopher my friend!! thank you so much 🤩
Yes. He is a very talented and kind person
is there a way to import this into a Wordpress website?
Can we achieve same effect without scroll bar?
yes! you just select a different layer as the trigger!
What do I need to do to scroll the page horizontally. Is there a name for this?
The user will scroll down but the page will move sideways. It's an L-shaped design. I'd be very happy if you could help.
Feel free to use my music in your next video 😏 (Roman Matovsky)
This tutorial is really useful, thank you!
Wonder if there's a way that we can just preview this animation by only scrolling without dragging the scroll bar?
thanks a lot!! unfortunately not... 😩
@@TimGabe yeah :/ thanks tho!!
It's important to have your assets correctly named, or else they will be parented with the wrong ones in the final animation.
hi tim! can the scroll is not use by the botton? natural like we're scrolling in web..
@TimGabe I loved the tutorial. Where can I find the Figma file access link? Can you please guide me?
it's in the link in the description if you scroll down to the button 😃
Good lord this is a GORGEOUS tutorial, Tim! Thanks a bunch from Seattle, USA and India.
im trying to do this effect with 3 main frames, but the dragging function only seems to work between the first 2 frames. how can i fix this?
they are separate interactions, so you'd have to do two separate drags!
I am a beginner in the UX filed. Can I put auto layout for these frames?
i have one doubt, i'm new to this so... yea. as far as i understand Figma is a prototyping tool right? meaning, it can throw CSS code but not HTML and least of all JS.
so, what is the benefit of doing this cool animations if Figma if you cannot export all of this into an actual website? or can you?
As I said, im new into this but I still struggle to understand what Figma does if it cannot make actual interfaces to work. thanks!
hey Bruno!
Figma is a pure design tool, allowing you to craft your design visions and if necessary even prototype/animate them. when it comes to the prototyping/animation feature, I just see it as a great way to communicate design ideas to your developers 😃
how you create botton blur man?
image + blur effect!!
Parallax a single fav web style for 8 years!
it's amazing!!
Please why are my not gettin access to the design source
Love the video. Thank you. I am trying to achieve the same effect for my website design, but is there any way to achieve it with mouse wheel scroll or touchpad gestures.
thank you so much Gopichand 🙏 unfortunately, you can’t achieve it on real scroll/touch…
your amazing thank you for the video, and after following the steps I cant believe I did that !! Thanks to you
that's incredibly cool to hear, Sakina 🤩
how to wire the scroll if i have multiple frames?
Didn't work for me. And I don't see figma file anywhere. The link opens video and that is it.
below the video you have the link to the file!
Thank u for sharing 🤩
can you tell me the name of font 'Parallax'?
not currently by the computer, but the Figma file is now linked in the description so you can check it out my friend ☺️👌
quick qs how do i create a scroll bar
you'll have to make a fake scroll bar (just a regular frame) than you add the drag interaction to!
Sorry i dont understand can u send me a tutorial??@@TimGabe
nice class bro. very nice class✋😵💫🤚
How exactly does it work the way it does? Why do the images come down from outside the frame when you scroll and how do they move like that when you scroll? And how do you create the scroll and make it scroll? Can you make it scroll left and right?
wow, many questions! can answer the last one: yes! same technique, but applied horizontally
@@TimGabe how about the rest?
Is the scrol bar moving along with the action of drag...or else is it directly come downward
How to achieve that blur effect from scratch
I have a question is it responzive for mobile devices,tab. And more ?😇Also great job and thanks to you🤩🙏🏼
I think we are very lucky that this young Swedish guy is teaching us young designers 😂
Thank you sir!
Vuk, thank you for this comment. 🙏😃
Amazing, today I create the paralax effects in Figma. Thanks for sharing
that's great to hear, Saadr!!
You explain in the worst possibl way
Brother really appreciate what you are doing for the Designers out there. You are Insane!
and I really appreciate your comment, Muhidul 😃 thanks a lot my friend!!
its paid only, there is no way to use it free.
i don't have that much money to buy that.
anyone please give me the activation code please!!!!!!!!!!!!!!!
thats really nice but its not really scroll triggered its dragging
yep... a little hack unfortunately since figma doesn't cover it natively..
Can anyone tell me, where i can find the first website in intro of video FOOD MENU website plz
such a great tutorial man, so humble, and such an on-point tutorial.....ciao!
I don't know what I did wrong but it does'nt work, I gues I'll do iy again from the start, thank you though👍
Yeah bro your file is not available on your website or anywhere anymore.
that's weird! i can access it 🧐
its simple, clear and great explenation, awesome 👍
thank you, raja!!
OMG!!! I FIGURED IT OUOOOUUUUTUTUTUTUTTU!!!!!! YAAAASSS!!!! Thank you man!
haha, that's amazing!!
Thank you for the video.I have done this but on a larger scale, creating a vertical with many elements. Now I ran into two problems. First not seeing the layer that leave the frame is kind of making it hard to stay in control of the animation. Second the loading time is so long that i basically cant work like this. Suggestions? Thank you :)
i solved the loading time. but yea just hard to create long verticals like this. takes so long to create the right frames
it can become pretty tedious for longer sections...
In order to see the layer that is outside the frame, you can simply unclick the "Clip content" of the particular frame and adjust the elements accordingly
Doing daily UIUX, at day 1
amazing!! i never thought it would be so simple. thank you very much for this tutorial :)
happy it worked out for you!!
Can you tell where to find the images to do parallax
Midjourney! 😃
Hello your classes are helpful.......I would want you to teach me more .....do you hold classes
Can you teach me personally.....
hey Mike! no classes at the moment I'm afraid... but I'm hoping to create something cool later this year 😃
@@TimGabe I will be looking forward to that......please more videos on component and interaction more also animation please......you videos are very helpful to me
Is there any way around for actual scroll effect?
if you mean with parallax, unfortunately not Ganesh 😰
Hi. Where did you download such a cool font?
I think it was from Dafont if I remember correctly… not by the computer atm so can’t give the proper attribution. check the file, Google it and you’ll find it 😃👌
where is the scroll bard? I can not find it
you have to create it yourself!
omg, thank you very much! you are explaining it so well
happy to hear you liked it, Anna!! 🙏
Thank you for tutorial, this is so much helpful for me
so so cool to hear Khoian!!
please if i wanted to export an animation for ad campaign on IG how would do that
Que durooo
bro what was the name of the "parallax" font in your video?
bro we can change figma to code 🤔
there are indeed some plugins/services for that!
do some workflow videos
I know people really value those kinds of videos, so will try to find the time to make more of them ☺️👌
You're telling me it's been this simple this whole time
haha... 😅
Wow! Thank you for this informative video!
happy you liked it! 🥳
More animation Videos please
I enjoy animations in Figma, so will definitely continue 🤩
It would be so helpful if you showed the hot key's your using..
So I was trying to resize the frame after i was done changing the position of the elements the elements and everything started to move to. How do i fix that?? Do i have to apply constraints to all the elements??
constraints is probably the issue here, yes!!
very help me, thanks!🤩🤩🤩🤩
happy it helped you 😃
you're a money, nerves and time saving god literally tysm
thank you for the nice comment, Anna! 😃
This was super helpful! Thanks so much!
happy you found it helpful, friend!!
Thank you for the simple straight forward tutorial
happy you found it easy! 😃
rockstar
Nice as always very informative
happy you liked it, Ahmad! 😃
Great! Exactly what I was looking for. Many thaks. Ciao!
best tips of figma !
thx :)
so kind of you, Krzysztof! 😃 thanks man!!
thank u
thank you!!
Damn what a nice tutorial and design. Thanks so much dude
Amazing. Great content.
thanks a lot, adnan!
Tim, I recently discovered your channel and finished the Figma crash course in 2 days. I can not even tell you how helpful and insightful your videos are. I have learned the things in two days which I could not do in past 7-8 months. Your way of teaching is exceptional. 😍😍😍 I generally never comment on any video on UA-cam, but your content is worth it. I am super grateful to find your channel. Please upload more content on a full website design with complex interactions. Looking forward for more amazing content 🌺🌻
As long you don't present yourself to others as an UI/UX profissional after 2 days "crash course" you are fine.
Hello what is the name of the images you used ?! I want to search..!
made with Midjourney!
I am trying to combine this effect with Parallax with simple animations for certain objects but it seems like i can only do one or the other. I added a scroll bar like your video and was able to get a rocket ship image to move as i move the scroll bar down, but when i get to the bottom of the page there is an animation that is based on "on hover" and does not happen unless i take my mouse off of the scroll bar and hover over the page, only then does the animation happen. Is there a way to combine these two? Can I make it so i can vertically scroll on the page without a scroll bar have the parralax effect like in your video but also trigger an on hover effect?
@alex maybe you can try putting that hover animation within a component positioned in the footer, then use Mouse Enter on the component’s instance? The component would have at least two variants for your animation: start and end sequence?
@@akirahojo2 i got it to work like that but the weird thing is why i drag back up it switches frames and the on hover component disappears instantly
Awesome!!
thanks!! 😃
Thank you tim you made my work easy
So good, thank you! It's just what I needed to present a project I'm working on
cool thanks
Thank you for this great video! You are the best!
Really good and clear mate, appreciate you
thanks a lot, Dominic!! 🙏
ty!!
Uauuu, very easy!!! Tnksssss
lol
no problem!! 😃
Is it same like the morph?
not sure what morph effect you're referring to, my friend!
This is amazing, thank you so much!
Came here from Flux Academy!
happy to have you here, gwen!!