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.
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
The explanation is very detailed and easy to follow. It's the best explanation i have ever seen on TH-cam . Thanks so much 🙏🙏🙏 and I am so happy that i found your Chanel
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!
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.
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?
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.
@@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
@@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.
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 .
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?
Here's my official Figma paid course which you can check out on: www.asaadmahmood.com/courses/figma-noob-to-pro Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
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
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.
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
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..
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...
hi after doing layout 13:16 i am unable to drag the pics, its selecting entire frame, i have ungrouped but also its not coming, im keep on trying it its not coming, what it could be the reason, please let me as soon as possible i will be waiting for your reply designer🙂
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!
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.
hi thank you for the tutorial i learned a lot and you are very clear. i am a beginner web designer and i am confused because you keep mentioning you wouldn't give this to a client. what would you give to a client if you wanted to submit to them a scroll animation? what are my other options and why isn't this a viable one for client work? what would be ideal for client work? what if i did want to make a scroll animation for a client. what would i do and which software would i use and how would i give it to them. a little confused and hoping you can explain to me what you meant. thanks!
You do not give this to a client because inorder for this to work, the client needs to place his mouse in a particular location, which doesn't happen. For a client, I can record a video and show it to him to explain the behaviour. If the client wants to play with the scroll effects by himself, I'd maybe even convert this to Framer and send it to him.
@@AMDesignAndDevthank you for the quick reply. I don’t understand why the clients mouse wouldn’t be in the position for it to work though? My mouse is in the position when I scroll through so why wouldn’t theirs be? I think I’m missing something? Also, is there a quick way to convert this file to framer or would I have to manually rebuild it in framer? Is there a client friendly system on framer that I could give to the client to view and play with this animation? One that Figma doesn’t have? Do you happen to have any videos that would sort of help educate me a bit on framer or submitted client work or anything like this so I have a better understanding of the back end system of this stuff. It seems I just am seeing web design tutorials which I’ve been doing and they are fun, but I don’t seem to know the practical side of actually using and sharing them for client work for example. Thanks again!
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!🤗🤗
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.
@AMDesignAndDev Hi I know you have gotten this question a lot on this video over the last 10 months and you probably are done wanting to look at it. If you could answer this question it would be a great. Q: At 2:03s mark when you duplicate a component and it pastes below but then you move the duplicate to the right. The duplicate stays inside your component, how do you allow that to happen? I have tried to do that multiple times but after I create the component and duplicate it trying to move to right side, the component exits the component set and becomes a new component outside that group. What is the trick to keep the component inside the "intro component" ? I think a lot of people have asked but you haven't answered this question. Could you provide an answer? That would be great. Thank you. I did like and subscribe to your channel. I like the way you speak and just do the process.
![เปิดบ้าน โคตรสวย ป๋องกพล รู้จักตั้งนาน เพิ่งรู้ว่ารวย!!! l [Nickynachat]](http://i.ytimg.com/vi/tmgCF_2HfYI/mqdefault.jpg)
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.
timestamp please ?
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
I'm so glad I could be of help and continue to be of help in the future as well!
Same situation here! First time freelancing.
That is how you get better and more experienced, by learning new tricks that are applicable in real work scenarios.
I have to present a prototype to a client and this is exactly what I was looking for, thank you
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.
Thanks for a straight to the point explanation! Love that you leave all the BS out.
The explanation is very detailed and easy to follow. It's the best explanation i have ever seen on TH-cam . Thanks so much 🙏🙏🙏 and I am so happy that i found your Chanel
best video. this saves my figma learning journey. thank you so much.
This is amazing, it is very difficult to find this type of tutorials in Spanish, thank you very much
Ouuu thank you so much.I'm always saying wooww while I'm watching your videos.
Great job. Thanks a lot for detailed explanations. Don't stop. Waiting for new tutorials.
Thanks so much, exactly what I've been looking for through the whole day!
Great, exactly what I have been searching for, thank you!
Very easy to follow video. Just the right pace and cutting out all unnecessary things.
Thank you :)
Amazing idea, mouse in is magic! Thanks for sharing
hi from Turkey, thank you for this best figma animation lesson
Thank you, I hope you and your family are safe in turkey, my prayers are with you all :(
@@AMDesignAndDev الحمد لله We are fine, but the situation here is very bad. Thank you. We need your prayer.
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.
Thanks for the great tutorial and trick! ❤
Love your videos, brother. Would love "chapters" included on your tutorials so I can easily go back to a section. :)
Awesome video, thanks for sharing it. It came right on time when I was in the need to do a presentation like this
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!
Suuuper helpful. Thanks mate!
i was trying find this shit for months did some trick to doit but yours are far better
Thanks man
It's amazing! Thank you for your video!
amazing video, I didn't need to continue the video It all was clear when you said the trick , GazakAllahu Khairan for sharing this
I played the hole video just to ensure you will get this view calculated :D also liked and subscribed
Thank you, you are very clear and understandable.
Thank you for making such cool and informative videos! You have helped me a lot!!
This was great, learned a lot here, thank you!
Thank you! You have helped me a lot!
Awesome video. You have taught a complicated topic in such a simpler way.
you're amazing man.
Newbie Here and you helped me a lot. Thanks brother!
Thank you, this was helpful.
Thank you for wonderful video. Exactly what I am looking for.
I love your videos bro
Your friend from egypt ❤❤❤
Thank you 🙏
I've learned a big thing today ;) thx mate!
Thanks very much for your work! This video was very helpful
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.
thx sir its was very help full for me today I learned this thing
Great tutorial! thanks a lot for creating it
this is so good THANK YOU
you are a life saver!
Thank you :) Glad you liked it.
Very helpful and amazing video👌
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?
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.
@@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
@@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.
@@AMDesignAndDev that's clear. Many thanks for your time and the video 😊
Is this portal to another dimension? Thanks for the awesome video man 😂
Loved this video!!
That is really useful brother, I am going to subscribe to you now... I love it 🍻
Thanks bro :)
Thank you so much for sharing this awesome video with us, you helped me a lot!
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 .
Thank you! It's absolutely great tutorial.
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?
Oh my gosh thank you soooooo much!!!!!!
Yo! This animation is sweet!
Here's my official Figma paid course which you can check out on:
www.asaadmahmood.com/courses/figma-noob-to-pro
Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
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
Awesome, congrats!
you are rock man!
That's great but what if I want to animate one of the buttons included in the scroll animations?
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.
thankyou brother. love from Pakistan❤
Np, and thank you for being a valuable follower :)
perrrfect, thankss
Video muito top, muito obrigado pelo aprendizado :)
very useful video plz make these kinds of videos thankyou
wow! great vedio!
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
Only starts at 7:40
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
very very useful way to get all things
Thank you man
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..
That is correct.
You can only link frames if they are not within existing frames.
@@AMDesignAndDevooh I see! Okay, I’ll try deconstructed the whole frame into smaller pieces then. Thank you!
pure gold!
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...
hi after doing layout 13:16 i am unable to drag the pics, its selecting entire frame, i have ungrouped but also its not coming, im keep on trying it its not coming, what it could be the reason, please let me as soon as possible i will be waiting for your reply designer🙂
Book a free 15m call here, I'll help.
calendly.com/thesmallsquare/discovery-call
After duplicating I can't move any of the element in the component, it drags the entire component
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!
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.
Thank you, really helpfull content
thanks amazing video.
insane magic :) thx :)
Which tool supports 'Scroll Animation'?
Would these animations still work if I export them to a website?
Thanks so much !!!
hi thank you for the tutorial i learned a lot and you are very clear. i am a beginner web designer and i am confused because you keep mentioning you wouldn't give this to a client. what would you give to a client if you wanted to submit to them a scroll animation? what are my other options and why isn't this a viable one for client work? what would be ideal for client work? what if i did want to make a scroll animation for a client. what would i do and which software would i use and how would i give it to them. a little confused and hoping you can explain to me what you meant. thanks!
You do not give this to a client because inorder for this to work, the client needs to place his mouse in a particular location, which doesn't happen.
For a client, I can record a video and show it to him to explain the behaviour.
If the client wants to play with the scroll effects by himself, I'd maybe even convert this to Framer and send it to him.
@@AMDesignAndDevthank you for the quick reply. I don’t understand why the clients mouse wouldn’t be in the position for it to work though?
My mouse is in the position when I scroll through so why wouldn’t theirs be? I think I’m missing something?
Also, is there a quick way to convert this file to framer or would I have to manually rebuild it in framer? Is there a client friendly system on framer that I could give to the client to view and play with this animation? One that Figma doesn’t have?
Do you happen to have any videos that would sort of help educate me a bit on framer or submitted client work or anything like this so I have a better understanding of the back end system of this stuff. It seems I just am seeing web design tutorials which I’ve been doing and they are fun, but I don’t seem to know the practical side of actually using and sharing them for client work for example. Thanks again!
@@AMDesignAndDev ps I see you have some framer vids on your profile. Perhaps I could gather some info to my questions here
Hi, you know how to record the prototype making it seems 'natural'? Recording while using the mouse scroll isn't smooth you know
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 .
I got it Thank you so much❤
You are the best
thanks u, best channel
I'm unable to move my component items after making variant 😢
Share your figma file, I can see.
In windows shift + space has a different function, Its previewing the frame . Kindly let me know what is the alternative for window users please!
were you abe to get the alternative for windows users? because i am facing the same problem
same for me, any solution yet?
it's very usefull sir
Hi Sir, scrolling not happening when mouse enters. How to fix this?
Can I know make this into a website?
This is so awesome.kindly can you told me how to export this file
You can just duplicate the file.
Thank you much Sir ❤
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!🤗🤗
By all means, go ahead!
Ok, now that the site is animated and finished, how do you get it on the internet?
Thanks for video! What's your opinion: what is the best method to do scroll animation of 12 000 pxl height file for export than to mp4?
Doing it with jitter
hey i want to learn all kind of figma animation . plz let me know more about your course
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.
Thank you🙏
@AMDesignAndDev Hi I know you have gotten this question a lot on this video over the last 10 months and you probably are done wanting to look at it. If you could answer this question it would be a great.
Q: At 2:03s mark when you duplicate a component and it pastes below but then you move the duplicate to the right. The duplicate stays inside your component, how do you allow that to happen? I have tried to do that multiple times but after I create the component and duplicate it trying to move to right side, the component exits the component set and becomes a new component outside that group. What is the trick to keep the component inside the "intro component" ? I think a lot of people have asked but you haven't answered this question. Could you provide an answer? That would be great. Thank you.
I did like and subscribe to your channel. I like the way you speak and just do the process.
brooooo thanks a loooooooot