How to Create an Endless Auto-Scrolling Animation in Figma with Moonsa

How to Create an Endless Auto-Scrolling Animation in Figma with Moonsa_uiux

Рет қаралды 14,019

Күн бұрын

In this video, we're going to learn how to create an Endless Auto Scrolling Animation in Figma together.
You can also watch this related video:
How to create infinity card animation in Figma step by step and in detail
• How to create infinity...
Sample Website: adplist.org/
#autoscrolling #horizontalscrolling #howtocreateautoscrollinganimation #figmaanimation #figma prototype #figmascrollanimation #figmascroll #figmascrolling #horizontalscrollingfigma #verticalscrollingfigma #autoscrollanimation #howtoanimateinfigma #endlessscroll #autoscroll #فیجما #فیگما #фигма #Ֆիգմա #피그마 #फिग्मा #moonsa_uiux
Music by Bensound.com/free-music-for-videos
License code: A8QZIYXSEFA7LVCK

Пікірлер: 103

@IzabelaBoneva Ай бұрын

I lasted so much time watching other videos and only after watching this one, I finally made the animation. Thank you so much for this tutorial!

@moonsa_uiux Ай бұрын

Dear Izabela, your comment warms my heart and encourages me to keep going, especially during times when I feel discouraged about making videos. Thank you very much

@NiloofarSadr-h2o Күн бұрын

Helpful, thank you

@KindGodObinnaNwazue 2 күн бұрын

Thank you so much for the video. It was very useful.

@moonsa_uiux 2 күн бұрын

Glad it was helpful!

@arpitshrmah Күн бұрын

Great video

@moonsa_uiux Күн бұрын

Happy to hear that

@GayathriGayathri-m5p Күн бұрын

use full thank you

@moonsa_uiux Күн бұрын

Happy to hear that

@Curiosity_in_100sec 16 күн бұрын

It’s the second time I am watching this video, and it helped me get ready for the presentation session with stakeholders. Thank you so much for this clear description.

@moonsa_uiux 13 күн бұрын

Glad it was helpful!

@donnabidar308 4 ай бұрын

Fantastic! can't wait to see more!

@moonsa_uiux 4 ай бұрын

Happy to see this🌹thanks for sharing your feedback

@zahrafarzaneh8402 4 ай бұрын

I love the video! I like how smoothly and step-by-step you explained everything. Thank you so much!❤

@moonsa_uiux 4 ай бұрын

Thank you. I’m happy that it was helpful for you 🌹

@peymanebrahim2572 4 ай бұрын

Wow, that was fascinating! 😮😮 I had no idea such a motion effect could be achieved in Figma. Please keep making more videos like this. Utilizing these effects can truly elevate the final output we present to our clients. Great work! 🎥✨

@moonsa_uiux 4 ай бұрын

Thanks for sharing your feedback. I’m glad that it’s helping you. 🌹

@Curiosity_in_100sec 4 ай бұрын

I just wanted to say thank you for this helpful video!

@moonsa_uiux 4 ай бұрын

Thank you for sharing your feedback 🌹

@tannervote Ай бұрын

This a exactly what I needed. Quick and to the point too. Thank you!

@moonsa_uiux Ай бұрын

Happy to hear that. Thanks for sharing your feedback

@AbigailScott-mk9zx Ай бұрын

So easy to follow, got it done on my first try! I've watched other tutorials on the same topic and did not get the same results. Thank goodness I clicked on your video. Keep it up!

@moonsa_uiux Ай бұрын

Dear Abigail! Your comment warms my heart🌹I’m happy that you found it helpful. Thank you for sharing your feedback!

@PeymanEbrahim Ай бұрын

Easy to follow, very well explained and to the point.

@moonsa_uiux Ай бұрын

Happy to hear that!

@elahemadani7095 4 ай бұрын

It was a very useful video with smooth instruction.Thanks a lot

@moonsa_uiux 4 ай бұрын

I’m so happy that you find it useful. Thanks for your feedback.

@NiloofarSadr-h2o 18 күн бұрын

You explained everything very well and in detail. Thank you so much

@moonsa_uiux 18 күн бұрын

Thank you for sharing your feedback 🌹

@BellaVita-b1m 24 күн бұрын

Thanks it works❤

@moonsa_uiux 24 күн бұрын

Happy to hear that🌹

@haditorabi-xf9xq 21 күн бұрын

This is the video I was looking for, thank you

@moonsa_uiux 21 күн бұрын

Have to hear that😊

@julietedike7719 2 ай бұрын

Very helpful, thank you very much

@moonsa_uiux 2 ай бұрын

Happy to hear that. Thanks for sharing your feedback

@niloofarsadr1478 4 ай бұрын

It was so useful. Thank you for your awesome tutorial ❤

@moonsa_uiux 4 ай бұрын

I’m glad you like it🌹

@ashtilization 3 ай бұрын

Thank you so much Moonsa, your video really helped me!🌻

@moonsa_uiux 3 ай бұрын

I’m glad that it was helpful, thanks for sharing your feedback

@Tales.of.Irshad 2 ай бұрын

i was exactly tryingthis trick in for my new project but was imperfect with finishing as I was thinking too complicated. You have showed the best version so easily.. thank you

@moonsa_uiux 2 ай бұрын

I’m happy you found it helpful. Thanks for sharing your feedback.

@kunal-ko 2 ай бұрын

Wow , that is just great

@moonsa_uiux 2 ай бұрын

Thanks

@mojdehkhorashahi3943 4 ай бұрын

This was very helpful thank you for explanation ❤️❤️🙏🏻🙏🏻

@moonsa_uiux 4 ай бұрын

Thanks for sharing your feedback 😊

@mohamedirfan184 2 ай бұрын

Thankyou so much..❤

@moonsa_uiux 2 ай бұрын

Thank you Mohamed

@gopisekar700 Ай бұрын

Thnx and it was working perfectly 😊

@moonsa_uiux Ай бұрын

Happy to hear that. Thanks for sharing your feedback

@MarianaGómez-e5w 18 күн бұрын

I haven't been able to achieve it, the animation start scrolling to the right and when it gets to the top right, it starts scrolling to the left, any advice with that?

@EgentiJoshua Ай бұрын

Thank you so much, your video was really helpful

@moonsa_uiux Ай бұрын

Happy to hear that. Thanks for sharing your feedback

@ewanvevo5491 Ай бұрын

Thank you gir 👌👌🔥

@moonsa_uiux Ай бұрын

You're so welcome!

@soumennath3212 Ай бұрын

thanks it is very helpful

@moonsa_uiux Ай бұрын

Glad to hear that

@maryammasoumirad 4 ай бұрын

Very useful video. Please post more content.

@moonsa_uiux 4 ай бұрын

Sure. Thanks for sharing your feedback 🌹

@aminkamrani2690 Ай бұрын

Let's gooo Mahsaa. when I heard your name i was like, wooooowwwwww. i gotta watch her video till the end. i wanna work with her so baaad. kudos to you.

@moonsa_uiux Ай бұрын

Thank you Amin! Your message warms my heart. 🙏🏻🌹

@aminkamrani2690 Ай бұрын

@@moonsa_uiux u have a business or a personal ig?

@jorgejuanorozco2497 26 күн бұрын

Thanks., i didi at the end :)

@moonsa_uiux 26 күн бұрын

Happy to hear that ;)

@zahrafarzaneh8402 4 ай бұрын

👍🏻👍🏻❤

@parijataraul375 2 ай бұрын

When I clip frame 2 it clip the align logos with the frame 1

@moxley.556 2 ай бұрын

hey don't mind. Your voice is damn awesome... i don't know anyone said that. but that's awesome. keep making more video. video is nice

@moonsa_uiux 2 ай бұрын

Thank you

@codesign4230 3 ай бұрын

Easy to understand tanx

@moonsa_uiux 2 ай бұрын

Happy to hear that

@giulianabelardo6907 2 ай бұрын

Does anyone know how to make it stop when you hover?

@kunal-ko 2 ай бұрын

Also to make it slower you can change the timing in the smart animate

@moonsa_uiux 2 ай бұрын

Yeah, the maximum delay in Figma is 10000ms, which we have used in this tutorial. To make it even slower, we can add more items.

@testest1632 2 ай бұрын

@@moonsa_uiux hi thanks in advance but which items can we add to make it slower? thanks again

@alvinoh8010 Ай бұрын

Hey! I followed your steps, but my text didn't scrolling :( frustated.

@RockDeborah666 2 ай бұрын

Hi, thank you for the tutorial, incredibly helpful and explained very shortly, but detailed! Question: How can I make the animation go slower? I made one with lots of logos, so it's going very quickly, how can I slow it down, would it be through changing the 1ms variable or something else? Thanks so much in advance if you know the answer to this question!! :)

@moonsa_uiux 2 ай бұрын

Hey! I’m glad you found it helpful. Unfortunately, there's a limitation in Figma that prevents us from slowing it down beyond 10000ms. However, you can increase the number of logos or experiment with a “custom spring” instead of Linear ( it is under smart animate) until you achieve the desired speed.

@RockDeborah666 2 ай бұрын

@@moonsa_uiux thank you so much!! I really appreciate it :)

@moonsa_uiux Күн бұрын

Hey, I have found a new way to adjust the scroll speed and explained it in this video kzfaq.info/get/bejne/jMVxl5yLtceZhJ8.htmlsi=FEIaLcck51550we8

@amaloboudalamoudi786 2 ай бұрын

Thank you ❤❤❤ but i have an issue. When the animation started and the logos move to the second frame, it shows with lower opacity then the opacity increases while moving! Why?

@moonsa_uiux 2 ай бұрын

Check the pass-through percentages of each logo and ensure they are set to 100%. Sometimes the percentages change accidentally. 'Pass through' is under the Layer section on the right side of Figma. Thank you for sharing your feedback.

@HadiTorabi-nf8eo 4 ай бұрын

Can I animate the texts with the same process? Thank you for the video 😇

@moonsa_uiux 4 ай бұрын

Yes, it has the same process. Thanks for your feedback🌹

@HuzaifaAli-ol5sj 4 ай бұрын

Hey, Can you please help me with this auto scrolling in my web! Really appreciate it.

@moonsa_uiux 4 ай бұрын

Sure, please send me an email. I will get in touch with you tomorrow. Here is 12:49 am in Canada right now 😉here is my email: mahsa.hm.ebrahim@gmail.com

@samhkh229 Ай бұрын

no idea why it didnt work on mine, did exactly the same steps, when play, not scrolling

@Classicyu4 3 ай бұрын

Thx! I kind of meet the problem, that after it finish to the end, it goes backward. Could you help me with the problem?

@moonsa_uiux 3 ай бұрын

Hmm, that's odd! It could be because the logos you've used or the text language are set from right to left, which is opposite to English. In this scenario, you'll need to follow the tutorial, but align the last logo in the first frame with the duplicated logo in the second frame. In my tutorial, you should align the first Microsoft logo in frame 2 with the second Microsoft logo in frame 3. Explaining it in comments might be challenging, but I'm confident you can figure it out on your own. Good luck!

@lalitbarai 2 ай бұрын

Same happened with me

@ShankarNagarajan2444 Ай бұрын

2:46 how to click in frame to move logo if i click the frame means whole frame moving please instruct me..sry for my english

@Only_for_Harbinger_hackathon 29 күн бұрын

Same problem. Can you pls tell me if u found any solution

@ShankarNagarajan2444 29 күн бұрын

@@Only_for_Harbinger_hackathon I found it brother..first u have to select all documents and group them. And select frame selection.....now it will be framed. Then u go to the left side area ( layers part ) find the particular frame and click the drop down and click the group. Now it will move separately...sry for my bad English..

@Only_for_Harbinger_hackathon 29 күн бұрын

@@ShankarNagarajan2444 thank u it worked

@nelsonogugua8742 11 күн бұрын

how can I slow it down?

@moonsa_uiux 10 күн бұрын

In this video, I explain a similar endless scroll with speed adjustments. You will have more control over the speed if you follow this tutorial: kzfaq.info/get/bejne/jMVxl5yLtceZhJ8.html

@moonsa_uiux Күн бұрын

Hey, I have found a new way to adjust the scroll speed and explained it in this video kzfaq.info/get/bejne/jMVxl5yLtceZhJ8.htmlsi=FEIaLcck51550we8

@amanpaul5689 Ай бұрын

Hi how can I slow down the speed of the carousel?

@moonsa_uiux Ай бұрын

Unfortunately, there's a limitation in Figma that prevents us from slowing it down beyond 10000ms. However, you can increase the number of logos or experiment with a "custom spring" instead of Linear ( it is under smart animate) until you achieve the desired speed.

@moonsa_uiux Күн бұрын

Hey, I have found a new way to adjust the scroll speed and explained it in this video kzfaq.info/get/bejne/jMVxl5yLtceZhJ8.htmlsi=FEIaLcck51550we8