Scroll Animations in Figma! (Without scroll support)

Подписаться 32 тыс.

Просмотров 241 тыс.

50% 1

Learn how to animate your sections in Figma for your Dribbble/Behance posts, and for your client presentations without having official scroll support in Figma!
Here's my official Figma paid course which you can check out on:
www.asaadmahmo...
Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
Be sure to subscribe and hit the notification icon! It really helps me help you and others like you be better designers, freelancers, entrepreneurs, and people in general!
/ @amdesignanddev
.
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn. / asaadmahmood
.
👉 Follow me on LinkedIn and Twitter for more content.
/ asaadmahmood
/ asaadmahmood5 .
Sign up for Figma: psxid.figma.co... .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-de...

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

6 янв 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 220

@EnesKab Год назад

The Shift + Space trick while moving the element made my day. I was constantly struggling with this situation, especially while using the auto layout in the whole page. Thanks.

@GamingGirlfriend_ 11 месяцев назад

timestamp please ?

@beavenezuela5755 Год назад

YOU ARE A LIFESAVER! Currently freelancing on the side of my full-time product job and my project just called for this type of animation, I volunteered to do it despite having zero xp with scroll animations (the ol say yes to client and secretly learn on the side trick!) This tutorial helped me power through the imposter's syndrome, thank you

@AMDesignAndDev Год назад

I'm so glad I could be of help and continue to be of help in the future as well!

@karolinamalec1380 Год назад

Same situation here! First time freelancing.

@feelcollins4358 10 месяцев назад

That is how you get better and more experienced, by learning new tricks that are applicable in real work scenarios.

@mariannys2433 Год назад

I have to present a prototype to a client and this is exactly what I was looking for, thank you

@jswanson859 Год назад

This is so helpful! I could have used this a couple of months ago, BUT will be using it in a future presentation. Thanks for sharing.

@zoharlindenbaum1327 Год назад

Thanks for a straight to the point explanation! Love that you leave all the BS out.

@mohamedyousef3867 Год назад

The explanation is very detailed and easy to follow. It's the best explanation i have ever seen on RU-vid . Thanks so much 🙏🙏🙏 and I am so happy that i found your Chanel

@vishalsurat6581 10 дней назад

thx sir its was very help full for me today I learned this thing

@altback Год назад

Very easy to follow video. Just the right pace and cutting out all unnecessary things.

@AMDesignAndDev Год назад

Thank you :)

@figmatutorialsanimation Год назад

Great job. Thanks a lot for detailed explanations. Don't stop. Waiting for new tutorials.

@azizov_aqsin 8 месяцев назад

Ouuu thank you so much.I'm always saying wooww while I'm watching your videos.

@maiabouza5221 10 месяцев назад

This is amazing, it is very difficult to find this type of tutorials in Spanish, thank you very much

@bhaktimagar6357 4 месяца назад

best video. this saves my figma learning journey. thank you so much.

@javieralas05 Год назад

Awesome video, thanks for sharing it. It came right on time when I was in the need to do a presentation like this

@anikami3640 Год назад

Thank you for making such cool and informative videos! You have helped me a lot!!

@mariasterminal Год назад

Love your videos, brother. Would love "chapters" included on your tutorials so I can easily go back to a section. :)

@ramazanguler6066 Год назад

hi from Turkey, thank you for this best figma animation lesson

@AMDesignAndDev Год назад

Thank you, I hope you and your family are safe in turkey, my prayers are with you all :(

@ramazanguler6066 Год назад

@@AMDesignAndDev الحمد لله We are fine, but the situation here is very bad. Thank you. We need your prayer.

@kindnessorimolade641 8 месяцев назад

Thanks so much, exactly what I've been looking for through the whole day!

@Agxnt1 Год назад

Thank you so much for this! I have tried to figure it out but not work until found this the video, also tricks Space+Shift make blows my mind! Amazing work!

@user-bc7pw7vs6j 2 месяца назад

i was trying find this shit for months did some trick to doit but yours are far better Thanks man

@poeeiphyu4235 Год назад

Thanks so much and I am so happy that I found your Channel. This is the exactly what I looking for, thank you in advance for coming up video.

@benlow24 Месяц назад

Cool breakdown to show how to utilise smart animate to bring each section to life. This is cool for interaction design but starts to get a bit messy for developer handover and all the variants of the section. Any tips for how to cater for dev handover?

@SanLean17 10 месяцев назад

Me gusto mucho el video, en español no encontré nada que explique lo que quería hacer, y vos lo haces de una manera muy simple. Me ayudaste mucho. Gracias.

@iamnovikovmaksim 8 месяцев назад

Great, exactly what I have been searching for, thank you!

@sharon_hart 4 месяца назад

Thank you, you are very clear and understandable.

@shilpamhatre6708 Год назад

Awesome video. You have taught a complicated topic in such a simpler way.

@antlerup Год назад

This was great, learned a lot here, thank you!

@Halamus_tafa Год назад

amazing video, I didn't need to continue the video It all was clear when you said the trick , GazakAllahu Khairan for sharing this

@Halamus_tafa Год назад

I played the hole video just to ensure you will get this view calculated :D also liked and subscribed

@BlenderJedi 2 месяца назад

That's great but what if I want to animate one of the buttons included in the scroll animations?

@hehebupbup Год назад

Thank you! You have helped me a lot!

@user-yc5vu5ee4g Год назад

It's amazing! Thank you for your video!

@mostafaazzouz591 3 месяца назад

I love your videos bro Your friend from egypt ❤❤❤ Thank you 🙏

@KarolinaKopacz Год назад

Great tutorial! thanks a lot for creating it

@maschooseplay9766 10 месяцев назад

Thank you for wonderful video. Exactly what I am looking for.

@saskiamel7368 Год назад

Thanks very much for your work! This video was very helpful

@brankhihiboldob5675 Год назад

Newbie Here and you helped me a lot. Thanks brother!

@user-io6pn7xi3i 10 месяцев назад

you are a life saver!

@AMDesignAndDev 10 месяцев назад

Thank you :) Glad you liked it.

@user-fl9ni6pv7k 4 месяца назад

Suuuper helpful. Thanks mate!

@sarahhws3759 Год назад

Thank you so much for sharing this awesome video with us, you helped me a lot!

@learnchinese5363 9 месяцев назад

Thank you AM Design for sharing this amazing video . could you please make same content a full detail video for us beginner . that will be so helpful . one more time thank you .

@RodolfoRodriguesdoNascimento Месяц назад

Video muito top, muito obrigado pelo aprendizado :)

@Jab7kO Год назад

I've learned a big thing today ;) thx mate!

@AgosArg 3 месяца назад

everything works perfectly thank you! but the buttons within those components animated are not working to navigate to a diferent page. what should I do please? :c

@EmikoMaekawa Месяц назад

pure gold!

@BurntDosa Год назад

After duplicating I can't move any of the element in the component, it drags the entire component

@gayperson2329 Год назад

SO HELPFUL!! thank u so much

@radhikachhabra1742 Год назад

Very helpful and amazing video👌

@yongqianggu8642 Год назад

Amazing idea, mouse in is magic! Thanks for sharing

@diboshmohanta6873 Месяц назад

Thank you man

@regime5070 9 месяцев назад

this is so good THANK YOU

@jelenataranovskaja6177 Год назад

Thank you! It's absolutely great tutorial.

@makedesignpop Год назад

Is this portal to another dimension? Thanks for the awesome video man 😂

@pamilerinfadeni6743 Год назад

Awesome video! But I feel it’s good you clip the mask of the frames so the animations would happen inside the container. The contents moves in from outside the container but if it’s clipped, it would move with the container. I hope you get me

@KuyaGameAstroneer 9 месяцев назад

Thanks this was a great tutorial! Can I ask you something? When you say that we wouldn't do this on a client's project, is it because it's too fancy or because the developer would not be able to replicate it?

@AMDesignAndDev 9 месяцев назад

I forgot when I said it and what was the reference, can you share the timestamp? Now with scroll animations being popular, I can definitely see a client requesting this.

@KuyaGameAstroneer 9 месяцев назад

@@AMDesignAndDev thanks for answering! You mention it once at 0:55, and I think you repeated it again in the video. I just wanted to understand if I could do this "trick" and pass it on to a developer

@AMDesignAndDev 9 месяцев назад

@@KuyaGameAstroneer got it, what I meant there was that the prototype is not for a client, because inorder for the prototype to work correctly, you need to have your point on the top of the frame. A client wouldn’t know to do that. That’s what I meant. You can record yourself however and share it with a client or a developer no problem.

@KuyaGameAstroneer 9 месяцев назад

@@AMDesignAndDev that's clear. Many thanks for your time and the video 😊

@boumerxphajba 4 месяца назад

thanks amazing video.

@muhammadfadlirusady6580 Год назад

That is really useful brother, I am going to subscribe to you now... I love it 🍻

@AMDesignAndDev Год назад

Thanks bro :)

@aakritikataria5646 Год назад

Loved this video!!

@kelseyw587 Год назад

Oh my gosh thank you soooooo much!!!!!!

@jordyreformerassalaam8851 Год назад

you are rock man!

@sharifurrahman2538 Год назад

very very useful way to get all things

@dawei886 10 дней назад

How do you achieve a trigger animation when a page scrolls to the center of the screen on a mobile? Because Mouse Enter doesn't work on mobile. Thanks!

@Rootsofknowledge. 11 месяцев назад

In windows shift + space has a different function, Its previewing the frame . Kindly let me know what is the alternative for window users please!

@samuelbelawu5543 9 месяцев назад

were you abe to get the alternative for windows users? because i am facing the same problem

@raqueljust.6679 2 месяца назад

perrrfect, thankss

@SlimDsgnr 6 месяцев назад

Yo! This animation is sweet!

@FlyByWheels Год назад

very useful video plz make these kinds of videos thankyou

@orianamonizrodriguez1151 Год назад

Thank you, really helpfull content

@eduardomelendezLIVE Год назад

GREAT VIDEO! Do you have a slide up page scroll sample video.. I know scrolling does not work but an effect like that? .. SO MANY THANKS

@3653charlie 5 месяцев назад

Thanks so much !!!

@shreyaasthana6463 21 день назад

thanks a lot

@Masterdunha3 Год назад

Awesome, congrats!

@user-wc4cn5kb9c 6 месяцев назад

Hi Sir, scrolling not happening when mouse enters. How to fix this?

@AlexDsage Год назад

You are the best

@shahnawazkaratela800 9 месяцев назад

On 2:37, How you selected "Intro Section" component and "Final" variant together? bcoz I can only select only one. I can't select both om them together.

@77AlexS 3 месяца назад

I can't seem to get past the first part with the sections. Right now, my dektop frame is all in one big frame. Am I suppose to make separate, individual frames and then make up the full desktop frame after? Hope that question made sense..

@AMDesignAndDev 3 месяца назад

That is correct. You can only link frames if they are not within existing frames.

@77AlexS 3 месяца назад

@@AMDesignAndDevooh I see! Okay, I’ll try deconstructed the whole frame into smaller pieces then. Thank you!

@quangtungnguyen3753 Год назад

thanks u, best channel

@user-yt1ok3gg1n Год назад

thankyou brother. love from Pakistan❤

@AMDesignAndDev Год назад

Np, and thank you for being a valuable follower :)

@fanika279 8 месяцев назад

Awesome tutorial, exactly what I need to do for my portfolio. But I have one question: how exactly do you share this on behance/dribble? Since Figma cannot export prototype to video/gif or whatever...

@quentincolas5280 6 месяцев назад

insane magic :) thx :)

@abdurrazaqadinugraha7468 Год назад

i cant drag outside :(

@urboiisiwyn 6 месяцев назад

I got it Thank you so much❤

@njtayi 6 месяцев назад

Thanks this was a great tutorial! and it helped me a lot Can I ask you something? I did everything you said in video but now the last thing i want to do is the navigation bar so when i press about us it has to go to about us section but i cant to it in prototype can you tell me how should add it ? i hope you understand what i mean.

@BabuGamer97 Год назад

it's very usefull sir

@ariadnarojas3691 Месяц назад

Would these animations still work if I export them to a website?

@CheezBadi Год назад

I'm unable to move my component items after making variant 😢

@AMDesignAndDev Год назад

Share your figma file, I can see.

@tanyavereshunska6890 Год назад

Thank you🙏

@samuxui Год назад

First congratulations for the content! 🔥🔥 Second, I would like to be publishing the same content on my channel for my Brazilian audience, they will love it (And of course, I will credit your channel because you deserve it). A big hug from your new Brazilian fan!🤗🤗

@AMDesignAndDev Год назад

By all means, go ahead!

@emirhanbaysal5005 Месяц назад

Can I know make this into a website?

@akshatha.c.bharadwaj5390 Год назад

Hey really thanks on this content I really want to know is that a fn key u use often coz I'm not using mac .

@evandromatt Год назад

Hi, you know how to record the prototype making it seems 'natural'? Recording while using the mouse scroll isn't smooth you know

@yuan80314 Год назад

I tried to use the shift and space on my Mac but it doesn't work for some reason...does anyone know why

@randomuser6225 Год назад

Only starts at 7:40

@alinasdkey Год назад

how to create an overlapping page effect appearing from below as we scroll ?

@delwboy Год назад

I could marry you!!! Been looking for this for sooo long

@mahiagrahari391 11 месяцев назад

hey i want to learn all kind of figma animation . plz let me know more about your course

@AMDesignAndDev 11 месяцев назад

The course is not just about prototyping and animations, its more about learning figma and more important things like autolayout, components, variants, variables, and advanced prototyping etc.

@lga9046 Год назад

Ok, now that the site is animated and finished, how do you get it on the internet?

@dsa_telugu Год назад

thank you

@noelvase4867 7 месяцев назад

great tutorial, but im using figma for the first time and i feel like if u had explained more clearly what buttons ur pressing for which command it would have been a bit easier to follow, had to replay multiple times to follow, but very nice video otherwise!

@AMDesignAndDev 7 месяцев назад

Hey, please go through my free Figma noob to Pro course to get familiar with Figma. Some of these videos are advanced.