Тёмный

Parallax Scroll Animation in 6 Minutes (Figma Tutorial) 

Tim Gabe
Подписаться 94 тыс.
Просмотров 315 тыс.
50% 1

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

 

4 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 188   
@isthatsharanya
@isthatsharanya Год назад
You're a life saver man, got stuck in a freelance project and your tutorial is super handy!!!!!
@TimGabe
@TimGabe Год назад
that's amazing to hear, Sharanya! thanks a lot!! 😃
@odoemenamchinyere7248
@odoemenamchinyere7248 10 месяцев назад
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. 😊
@TimGabe
@TimGabe 10 месяцев назад
really happy to hear that, thank you for commenting 😃
@piotrkarp9562
@piotrkarp9562 Год назад
Like always, dude, you're an amazing teacher. I would never figured this myself! And figma files included, thanks! Honestly, thanks man!
@TimGabe
@TimGabe Год назад
thank you Piotr, whenever I get feedback on my teaching abilities it makes me feel super happy. 🙏☺️
@malcommiya5940
@malcommiya5940 11 месяцев назад
Hi I was watching the nested components video and it just vanished and is now private...may you help?@@TimGabe
@TimGabe
@TimGabe 11 месяцев назад
@@malcommiya5940 my friend! it’ll be released next week, mistake by me to release it early 😅
@fearless9583
@fearless9583 3 месяца назад
Good lord this is a GORGEOUS tutorial, Tim! Thanks a bunch from Seattle, USA and India.
@khushbuchundawat5945
@khushbuchundawat5945 3 месяца назад
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 RU-vid, 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 🌺🌻
@jkoblivion4175
@jkoblivion4175 2 месяца назад
As long you don't present yourself to others as an UI/UX profissional after 2 days "crash course" you are fine.
@thewebstylist
@thewebstylist 10 месяцев назад
Parallax a single fav web style for 8 years!
@TimGabe
@TimGabe 10 месяцев назад
it's amazing!!
@DaTruthHurtzzzz
@DaTruthHurtzzzz Год назад
you broke this down so perfect and easy to understand thank you
@TimGabe
@TimGabe Год назад
happy to help man!
@SzabatDesign
@SzabatDesign Год назад
Where I see Tim new film in notifications. Always click 🔥💪😊
@TimGabe
@TimGabe Год назад
Christopher my friend!! thank you so much 🤩
@Dangellion
@Dangellion Год назад
Yes. He is a very talented and kind person
@annakravchenko6489
@annakravchenko6489 Год назад
you're a money, nerves and time saving god literally tysm
@TimGabe
@TimGabe Год назад
thank you for the nice comment, Anna! 😃
@doppleganger124
@doppleganger124 2 месяца назад
such a great tutorial man, so humble, and such an on-point tutorial.....ciao!
@saadrahman86
@saadrahman86 Год назад
Amazing, today I create the paralax effects in Figma. Thanks for sharing
@TimGabe
@TimGabe Год назад
that's great to hear, Saadr!!
@muhidulhasan1283
@muhidulhasan1283 Год назад
Brother really appreciate what you are doing for the Designers out there. You are Insane!
@TimGabe
@TimGabe Год назад
and I really appreciate your comment, Muhidul 😃 thanks a lot my friend!!
@tranvobao999
@tranvobao999 Год назад
Thank you for the simple straight forward tutorial
@TimGabe
@TimGabe Год назад
happy you found it easy! 😃
@khoianh3220
@khoianh3220 Год назад
Thank you for tutorial, this is so much helpful for me
@TimGabe
@TimGabe Год назад
so so cool to hear Khoian!!
@vukvukasinovic3816
@vukvukasinovic3816 Год назад
I think we are very lucky that this young Swedish guy is teaching us young designers 😂 Thank you sir!
@TimGabe
@TimGabe Год назад
Vuk, thank you for this comment. 🙏😃
@maxshakun1177
@maxshakun1177 9 месяцев назад
This was super helpful! Thanks so much!
@TimGabe
@TimGabe 9 месяцев назад
happy you found it helpful, friend!!
@vishnu613
@vishnu613 8 месяцев назад
Thank you tim you made my work easy
@DanielJimenez-tp8bc
@DanielJimenez-tp8bc Год назад
OMG!!! I FIGURED IT OUOOOUUUUTUTUTUTUTTU!!!!!! YAAAASSS!!!! Thank you man!
@TimGabe
@TimGabe Год назад
haha, that's amazing!!
@Doowutchylike
@Doowutchylike 3 месяца назад
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...
@rajahutan1698
@rajahutan1698 Год назад
its simple, clear and great explenation, awesome 👍
@TimGabe
@TimGabe 9 месяцев назад
thank you, raja!!
@Julie-mi1dz
@Julie-mi1dz Год назад
amazing!! i never thought it would be so simple. thank you very much for this tutorial :)
@TimGabe
@TimGabe Год назад
happy it worked out for you!!
@k13r4
@k13r4 Год назад
Is it also possible to create this scrolling effect only by using mouse wheel?
@kilokilozurich
@kilokilozurich 7 месяцев назад
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?
@annakorchagina8404
@annakorchagina8404 Год назад
omg, thank you very much! you are explaining it so well
@TimGabe
@TimGabe Год назад
happy to hear you liked it, Anna!! 🙏
@elkk5250
@elkk5250 10 месяцев назад
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?
@TimGabe
@TimGabe 10 месяцев назад
thanks a lot!! unfortunately not... 😩
@elkk5250
@elkk5250 10 месяцев назад
@@TimGabe yeah :/ thanks tho!!
@sakinakhan8586
@sakinakhan8586 Год назад
your amazing thank you for the video, and after following the steps I cant believe I did that !! Thanks to you
@TimGabe
@TimGabe Год назад
that's incredibly cool to hear, Sakina 🤩
@vishydelaire
@vishydelaire 7 месяцев назад
So good, thank you! It's just what I needed to present a project I'm working on
@vision3690
@vision3690 5 месяцев назад
Damn what a nice tutorial and design. Thanks so much dude
@nina_brilevich
@nina_brilevich Год назад
OMG! It's amaizing! Thank you soooooo much!
@TimGabe
@TimGabe Год назад
glad you liked it Nina!!
@olaniyi-femi
@olaniyi-femi 5 месяцев назад
how can i do this without using to drag scroll
@arantxaperezcastillo355
@arantxaperezcastillo355 5 месяцев назад
transforms each screen into frames, then into components, and adds the "mouse enter" interaction
@thang8617
@thang8617 2 месяца назад
Using requestanimationframe
@RahulRK-oi9pr
@RahulRK-oi9pr 3 месяца назад
Users usually scroll not by dragging, so how to do this scrolling ?
@bukharidesigns
@bukharidesigns 11 месяцев назад
Amazing. Great content.
@TimGabe
@TimGabe 11 месяцев назад
thanks a lot, adnan!
@reneraljustyo9335
@reneraljustyo9335 10 месяцев назад
very help me, thanks!🤩🤩🤩🤩
@TimGabe
@TimGabe 10 месяцев назад
happy it helped you 😃
@Kate_WebDesign
@Kate_WebDesign 8 месяцев назад
Thank you for this great video! You are the best!
@Slaine2watch
@Slaine2watch Год назад
Also fantastic! Maybe you have time to show us how you do fancy page transitions 🔥🔥🔥
@TimGabe
@TimGabe Год назад
that’s a cool idea!! thanks a lot for sharing 😃🤩
@kfabio2007
@kfabio2007 Год назад
best tips of figma ! thx :)
@TimGabe
@TimGabe Год назад
so kind of you, Krzysztof! 😃 thanks man!!
@Paluck29
@Paluck29 Год назад
Wow! Thank you for this informative video!
@TimGabe
@TimGabe Год назад
happy you liked it! 🥳
@KristenBecker-jy4kx
@KristenBecker-jy4kx Год назад
You're telling me it's been this simple this whole time
@TimGabe
@TimGabe 9 месяцев назад
haha... 😅
@CristinaAlbano
@CristinaAlbano Год назад
Great! Exactly what I was looking for. Many thaks. Ciao!
@MasterIsroilov-o9q
@MasterIsroilov-o9q 2 месяца назад
nice class bro. very nice class✋😵‍💫🤚
@dominicfrain1265
@dominicfrain1265 Год назад
Really good and clear mate, appreciate you
@TimGabe
@TimGabe Год назад
thanks a lot, Dominic!! 🙏
@m.ehtizan
@m.ehtizan Год назад
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.
@TimGabe
@TimGabe Год назад
hey Muhammad! appreciate you reaching out 😃 currently I'm not in need of any help with the editing parts, but thanks for asking! 🙏
@m.ehtizan
@m.ehtizan Год назад
@@TimGabe please let me know when you need. Thanks
@flima.visuals
@flima.visuals 9 месяцев назад
Awesome!!
@TimGabe
@TimGabe 9 месяцев назад
thanks!! 😃
@marllysonalves4760
@marllysonalves4760 Год назад
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?
@TimGabe
@TimGabe Год назад
right?! unfortunately this is the only way as of now 😫
@akankshashah7658
@akankshashah7658 8 месяцев назад
@TimGabe I loved the tutorial. Where can I find the Figma file access link? Can you please guide me?
@TimGabe
@TimGabe 8 месяцев назад
it's in the link in the description if you scroll down to the button 😃
@melaniedesigner
@melaniedesigner Год назад
Awesome and pretty useful, thanks a lot!!
@TimGabe
@TimGabe Год назад
appreciate it, Melanie!! thanks a lot 🥳
@KHOUD3AA
@KHOUD3AA 11 месяцев назад
thank u
@TimGabe
@TimGabe 11 месяцев назад
thank you!!
@Anca_Webdesign
@Anca_Webdesign 6 месяцев назад
I have a question is it responzive for mobile devices,tab. And more ?😇Also great job and thanks to you🤩🙏🏼
@LinhLe-rx2hj
@LinhLe-rx2hj Год назад
This is amazing, thank you so much!
@muhidulhasan1283
@muhidulhasan1283 Год назад
More animation Videos please
@TimGabe
@TimGabe Год назад
I enjoy animations in Figma, so will definitely continue 🤩
@madhoundes
@madhoundes Год назад
Nice as always very informative
@TimGabe
@TimGabe Год назад
happy you liked it, Ahmad! 😃
@pratikshajondhalekar86
@pratikshajondhalekar86 Год назад
Can we achieve same effect without scroll bar?
@TimGabe
@TimGabe Год назад
yes! you just select a different layer as the trigger!
@fatemepirhadi7053
@fatemepirhadi7053 2 месяца назад
cool thanks
@oelifzen
@oelifzen Месяц назад
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.
@brunoescoto9630
@brunoescoto9630 Год назад
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!
@TimGabe
@TimGabe Год назад
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 😃
@Sardar-l5u
@Sardar-l5u Год назад
bro can u make a video on different animation styles in figma
@TimGabe
@TimGabe 11 месяцев назад
not doing videos on figma specifically atm, but if you're into framer i have a bunch!
@dimensionaliquid8024
@dimensionaliquid8024 10 месяцев назад
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?
@TimGabe
@TimGabe 10 месяцев назад
wow, many questions! can answer the last one: yes! same technique, but applied horizontally
@dimensionaliquid8024
@dimensionaliquid8024 10 месяцев назад
@@TimGabe how about the rest?
@madhurajyothi3545
@madhurajyothi3545 10 месяцев назад
Is the scrol bar moving along with the action of drag...or else is it directly come downward
@comosea119
@comosea119 8 месяцев назад
ty!!
@robertopatron2132
@robertopatron2132 Год назад
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?
@TimGabe
@TimGabe Год назад
did you manage to solve it, Roberto?
@gopichand-narra
@gopichand-narra Год назад
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.
@TimGabe
@TimGabe Год назад
thank you so much Gopichand 🙏 unfortunately, you can’t achieve it on real scroll/touch…
@managha5528
@managha5528 3 месяца назад
I am a beginner in the UX filed. Can I put auto layout for these frames?
@andrekirsch2577
@andrekirsch2577 Год назад
It would be so helpful if you showed the hot key's your using..
@MiAlbum-wl1zf
@MiAlbum-wl1zf Месяц назад
hi tim! can the scroll is not use by the botton? natural like we're scrolling in web..
@ЛинаСтрелина
@ЛинаСтрелина Год назад
Hi. Where did you download such a cool font?
@TimGabe
@TimGabe Год назад
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 😃👌
@ksz8418
@ksz8418 10 месяцев назад
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?
@TimGabe
@TimGabe 10 месяцев назад
they are separate interactions, so you'd have to do two separate drags!
@leilanenegrinho6136
@leilanenegrinho6136 Год назад
Uauuu, very easy!!! Tnksssss lol
@TimGabe
@TimGabe Год назад
no problem!! 😃
@iklxsss
@iklxsss Год назад
is there a way to import this into a Wordpress website?
@oi.sirrer
@oi.sirrer Год назад
Thank u for sharing 🤩 can you tell me the name of font 'Parallax'?
@TimGabe
@TimGabe Год назад
not currently by the computer, but the Figma file is now linked in the description so you can check it out my friend ☺️👌
@JamieWooster-d6e
@JamieWooster-d6e Год назад
thats not a scroll interaction, thats a drag interaction - deceptive title.
@TimGabe
@TimGabe Год назад
very true... unfortunately, you can't achieve a real parallax scroll animation in Figma!
@jkoblivion4175
@jkoblivion4175 2 месяца назад
Absolutely right. But this is for beginners, so it's not of a big deal.
@Marius-wz3yf
@Marius-wz3yf Год назад
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 :)
@Marius-wz3yf
@Marius-wz3yf Год назад
i solved the loading time. but yea just hard to create long verticals like this. takes so long to create the right frames
@TimGabe
@TimGabe Год назад
it can become pretty tedious for longer sections...
@jineshgeorge3514
@jineshgeorge3514 Год назад
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
@mikexhang663
@mikexhang663 Год назад
Hello your classes are helpful.......I would want you to teach me more .....do you hold classes
@mikexhang663
@mikexhang663 Год назад
Can you teach me personally.....
@TimGabe
@TimGabe Год назад
hey Mike! no classes at the moment I'm afraid... but I'm hoping to create something cool later this year 😃
@mikexhang663
@mikexhang663 Год назад
@@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
@igo2054
@igo2054 Год назад
thats really nice but its not really scroll triggered its dragging
@TimGabe
@TimGabe 9 месяцев назад
yep... a little hack unfortunately since figma doesn't cover it natively..
@kavyamalik-tk2fg
@kavyamalik-tk2fg 2 месяца назад
How to achieve that blur effect from scratch
@Akash_Chopperla
@Akash_Chopperla Год назад
do some workflow videos
@TimGabe
@TimGabe Год назад
I know people really value those kinds of videos, so will try to find the time to make more of them ☺️👌
@dulffreyr5820
@dulffreyr5820 19 часов назад
what if i wanna scroll animationwith a 3dmodel with animation
@akhileshwaghmare
@akhileshwaghmare Год назад
Is there any way around for actual scroll effect?
@TimGabe
@TimGabe Год назад
if you mean with parallax, unfortunately not Ganesh 😰
@Speedsuey
@Speedsuey 11 месяцев назад
quick qs how do i create a scroll bar
@TimGabe
@TimGabe 11 месяцев назад
you'll have to make a fake scroll bar (just a regular frame) than you add the drag interaction to!
@Speedsuey
@Speedsuey 11 месяцев назад
Sorry i dont understand can u send me a tutorial??@@TimGabe
@sapphostraphouse
@sapphostraphouse 2 месяца назад
It's important to have your assets correctly named, or else they will be parented with the wrong ones in the final animation.
@Paul_Promise
@Paul_Promise 22 дня назад
Please why are my not gettin access to the design source
@midnightcookies2333
@midnightcookies2333 2 месяца назад
how to wire the scroll if i have multiple frames?
@darkhitech
@darkhitech 4 месяца назад
Doing daily UIUX, at day 1
@angelgonzalezjimenez4459
@angelgonzalezjimenez4459 9 месяцев назад
where is the scroll bard? I can not find it
@TimGabe
@TimGabe 9 месяцев назад
you have to create it yourself!
@EgiRahmadani-t9k
@EgiRahmadani-t9k 8 месяцев назад
bro what was the name of the "parallax" font in your video?
@RomanMatovsky
@RomanMatovsky Месяц назад
Feel free to use my music in your next video 😏 (Roman Matovsky)
@robertsanchez2213
@robertsanchez2213 9 месяцев назад
how you create botton blur man?
@TimGabe
@TimGabe 9 месяцев назад
image + blur effect!!
@dennisnnorom
@dennisnnorom 7 месяцев назад
please if i wanted to export an animation for ad campaign on IG how would do that
@realwordsofman
@realwordsofman 8 месяцев назад
Can anyone tell me, where i can find the first website in intro of video FOOD MENU website plz
@arielabreu1176
@arielabreu1176 Месяц назад
Que durooo
@dinesh.p5288
@dinesh.p5288 11 месяцев назад
bro we can change figma to code 🤔
@TimGabe
@TimGabe 11 месяцев назад
there are indeed some plugins/services for that!
@rupe6103
@rupe6103 10 месяцев назад
Didn't work for me. And I don't see figma file anywhere. The link opens video and that is it.
@TimGabe
@TimGabe 10 месяцев назад
below the video you have the link to the file!
@Stressgaming2002
@Stressgaming2002 9 месяцев назад
Can you tell where to find the images to do parallax
@TimGabe
@TimGabe 9 месяцев назад
Midjourney! 😃
@littlethingsbyvaidehee8852
@littlethingsbyvaidehee8852 10 месяцев назад
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??
@TimGabe
@TimGabe 9 месяцев назад
constraints is probably the issue here, yes!!
@nargess1998
@nargess1998 Год назад
Hello what is the name of the images you used ?! I want to search..!
@TimGabe
@TimGabe Год назад
made with Midjourney!
@nargraphic87
@nargraphic87 7 месяцев назад
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👍
@АннаАнісімова-й7т
How to make a blur?
@TimGabe
@TimGabe Год назад
just add a layer blur in the effects panel in the right sidebar 😃
@АннаАнісімова-й7т
@@TimGabe thanks a lot😉
@Habibee88
@Habibee88 Год назад
Is it same like the morph?
@TimGabe
@TimGabe Год назад
not sure what morph effect you're referring to, my friend!
@PauloOlandez
@PauloOlandez 6 месяцев назад
rockstar
@alexparsons909
@alexparsons909 Год назад
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?
@akirahojo2
@akirahojo2 Год назад
@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?
@alexparsons909
@alexparsons909 Год назад
@@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
@thebourgeoispunk
@thebourgeoispunk 9 месяцев назад
Yeah bro your file is not available on your website or anywhere anymore.
@TimGabe
@TimGabe 9 месяцев назад
that's weird! i can access it 🧐
@Gammacookie333
@Gammacookie333 День назад
Honestly, these type of websites are in the top 3 I hate the most. Instead of quickly getting the info or doing stuff, you need to scroll through this messy bullshit.
@kashifullah9124
@kashifullah9124 Год назад
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!!!!!!!!!!!!!!!
Далее
Figma Smart Animate for Beginners (2022 Tutorial)
9:51
LOLLIPOP-SCHUTZ-GADGET 🍭 DAS BRAUCHST DU!
00:28
Просмотров 10 млн
НЕ БУДИТЕ КОТЯТ#cat
00:21
Просмотров 848 тыс.
Creating Text Animations in Figma: Tutorial & Tips
9:24
Parallax Scroll Effect - Figma Tutorial
13:45
Просмотров 99 тыс.
How To Animate Like After Effects in Figma
10:27
Просмотров 54 тыс.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 817 тыс.
LOLLIPOP-SCHUTZ-GADGET 🍭 DAS BRAUCHST DU!
00:28
Просмотров 10 млн