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

Рет қаралды 41,759

Күн бұрын

Пікірлер: 195

@IzabelaBoneva 6 ай бұрын

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!

@design_with_mahsa 6 ай бұрын

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

@connectwithjessica 4 ай бұрын

same. so easy to follow and very clear instructions~

@Curiosity_in_5_minutes 9 ай бұрын

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

@design_with_mahsa 9 ай бұрын

Thank you for sharing your feedback 🌹

@samueladigun2686 19 сағат бұрын

Thank you! Clear and precise

@design_with_mahsa 5 сағат бұрын

Happy to hear that

@dineshmilano6495 4 ай бұрын

After trying all other methods, Finally I found the right one which saved so much of my time. Thank you so much for this tutorial. Waiting for more ...

@design_with_mahsa 4 ай бұрын

Thank you! Your comment warms my heart.

@Curiosity_in_5_minutes 5 ай бұрын

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.

@design_with_mahsa 5 ай бұрын

Glad it was helpful!

@iroegbulamchukwuemeka4989 3 ай бұрын

Hello do you mind being a mentor

@wtv144 2 ай бұрын

duuuuude thank you so much! it worked! you're a wizard

@design_with_mahsa 2 ай бұрын

Glad it helped

@IAMSWARAJ Ай бұрын

Your tutorials is very helpful I watched many others, but I couldn’t understand them as well as I understood yours

@design_with_mahsa Ай бұрын

I’m happy to hear that, thank you for sharing your feedback.

@RagaRewired 4 ай бұрын

mostly beautiful tutorial and underrated channel for web desinging and frontend

@design_with_mahsa 4 ай бұрын

Thank you so much for the kind words! I’m glad you find the tutorials helpful

@AbigailScott-mk9zx 6 ай бұрын

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!

@design_with_mahsa 6 ай бұрын

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

@manyasaini1012 25 күн бұрын

Amazing Tutorial 👏👏 This tutorial is helpful for beginners.

@design_with_mahsa 25 күн бұрын

Happy to hear that.🌹

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

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

@design_with_mahsa 7 ай бұрын

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

@PeymanEbrahim 6 ай бұрын

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

@design_with_mahsa 6 ай бұрын

Happy to hear that!

@NiloofarSadr-h2o 5 ай бұрын

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

@design_with_mahsa 5 ай бұрын

Thank you for sharing your feedback 🌹

@RIYASINGH-ou2vv 2 ай бұрын

You saved me fr❤❤❤❤❤❤ love you bruhh

@design_with_mahsa 2 ай бұрын

Your welcome 🌹🌹

@peymanebrahim2572 9 ай бұрын

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! 🎥✨

@design_with_mahsa 9 ай бұрын

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

@zahrafarzaneh8402 2 ай бұрын

I watched it again and it helped me a lot thank you !

@design_with_mahsa 2 ай бұрын

Happy to hear that!

@HamzaKing-c6k 23 күн бұрын

Amazing 😍😍 Nice I just wanted to say thank you for this helpful video

@design_with_mahsa 23 күн бұрын

I’m happy to hear that!

@alexdejesus4048 Ай бұрын

very nice

@design_with_mahsa Ай бұрын

Thanks

@tannervote 6 ай бұрын

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

@design_with_mahsa 6 ай бұрын

Happy to hear that. Thanks for sharing your feedback

@haditorabi-xf9xq 5 ай бұрын

This is the video I was looking for, thank you

@design_with_mahsa 5 ай бұрын

Have to hear that😊

@KindGodObinnaNwazue 4 ай бұрын

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

@design_with_mahsa 4 ай бұрын

Glad it was helpful!

@Join_Inaya 2 ай бұрын

thank you. I always come back to this video lol

@design_with_mahsa 2 ай бұрын

Happy to hear that!

@dotuidesign 3 ай бұрын

so cool, so awesome!

@sirisha29_09 4 ай бұрын

THANKYOU ITS WORKING 😘

@design_with_mahsa 4 ай бұрын

Welcome 😊

@zahrafarzaneh8402 9 ай бұрын

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

@design_with_mahsa 9 ай бұрын

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

@gopisekar700 6 ай бұрын

Thnx and it was working perfectly 😊

@design_with_mahsa 6 ай бұрын

Happy to hear that. Thanks for sharing your feedback

@EgentiJoshua 6 ай бұрын

Thank you so much, your video was really helpful

@design_with_mahsa 6 ай бұрын

Happy to hear that. Thanks for sharing your feedback

@ewanvevo5491 5 ай бұрын

Thank you gir 👌👌🔥

@design_with_mahsa 5 ай бұрын

You're so welcome!

@elahemadani7095 9 ай бұрын

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

@design_with_mahsa 9 ай бұрын

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

@ashtilization 7 ай бұрын

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

@design_with_mahsa 7 ай бұрын

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

@aminkamrani2690 6 ай бұрын

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.

@design_with_mahsa 6 ай бұрын

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

@aminkamrani2690 6 ай бұрын

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

@julietedike7719 7 ай бұрын

Very helpful, thank you very much

@design_with_mahsa 7 ай бұрын

Happy to hear that. Thanks for sharing your feedback

@NiloofarSadr-h2o 4 ай бұрын

Helpful, thank you

@mojdehkhorashahi3943 9 ай бұрын

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

@design_with_mahsa 8 ай бұрын

Thanks for sharing your feedback 😊

@arpitshrmah 4 ай бұрын

Great video

@design_with_mahsa 4 ай бұрын

Happy to hear that

@mohamedirfan184 6 ай бұрын

Thankyou so much..❤

@design_with_mahsa 6 ай бұрын

Thank you Mohamed

@snowycrunch016 2 ай бұрын

Is it possible to make an endless carousel , but in such a way that when you hover the mouse over a photo, it stops?

@design_with_mahsa 2 ай бұрын

You don’t have to create all the animations in Figma, especially since the free version has limitations. For more complex animations, you don’t need to rely entirely on Figma’s Prototype feature. Instead, you can leave a comment or add instructions near the design, explaining to the developer how the animation should work. For example, you can mention that in the Figma design, the animation should be coded so that when the user hovers their pointer over the endless scroll, it pauses. When the mouse pointer moves away, the scrolling resumes. While Figma can’t handle all animations, clear communication with the developer ensures they can implement the interactions as intended.

@snowycrunch016 2 ай бұрын

@@design_with_mahsa thank you for the answer

@lingvaterra 2 ай бұрын

@@design_with_mahsathanks for the answer, is it possible to achieve the same effect in Protopie?

@BellaVita-b1m 5 ай бұрын

Thanks it works❤

@design_with_mahsa 5 ай бұрын

Happy to hear that🌹

@harbiaziz384 Ай бұрын

Can you assist me how can i select two frames in double click ?

@design_with_mahsa Ай бұрын

Sorry, I didn’t understand your question.

@harrisonarias2746 27 күн бұрын

thans! so cool!

@design_with_mahsa 27 күн бұрын

You’re welcome!

@akshayraj1407 Ай бұрын

I tried clicking inside the frame to move the logos to the left, but it’s not working as shown in the video. When I move the logos, the whole frame moves with them. Could this be due to the auto layout?

@design_with_mahsa Ай бұрын

Are you sure you’re selecting the inner frame? You’ll need to select the inner frame first, then you can move it using your mouse or the arrow keys on your keyboard. For more details, you can also watch this tutorial: kzbin.info/www/bejne/nny3q3mZrLSnmdk"

@paulamourad4699 3 ай бұрын

Thank you!

@design_with_mahsa 3 ай бұрын

You're welcome!

@soumennath3212 6 ай бұрын

thanks it is very helpful

@design_with_mahsa 6 ай бұрын

Glad to hear that

@MAZZTHEGAMER 4 ай бұрын

thanks moonsa

@abdurrofiq9006 4 күн бұрын

why is mine so fast? I have already adjusted it to the video. but I did not select frame A and B, but I selected from Frame A to become a component and then added a variant.. does that have an effect?

@niloofarsadr1478 9 ай бұрын

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

@design_with_mahsa 9 ай бұрын

I’m glad you like it🌹

@iamJoelEstrada 3 ай бұрын

Thank you for the tutorial! To go in reverse order for the marquee text (words scroll to right, instead of left like in the video) what would you do?? Thank you

@design_with_mahsa 3 ай бұрын

Thank you for your feedback. To move the logos to the right, you should shift them until the second set of logos appears in the first frame. Then, use the first set of logos in the second frame. In this example, instead of using the first Spotify logo, you should shift the logos until the second Spotify logo appears in the first frame. For the second frame, use the first Spotify logo without shifting the logos. I hope this explanation is clear. If you need a more detailed description, I have another video with similar steps that provides more details: kzbin.info/www/bejne/jJCklWyQhcZois0si=n-wQ6a3TpYtcqOhJ

@Chaotic_Good94 23 күн бұрын

Hiii awesome video! but a problem seeking yr help :) everything running smoothly BUT the logos slowly fades for some reason then they turn 100% opacity wondering why T.T

@design_with_mahsa 22 күн бұрын

Thanks! Glad you enjoyed the video! For the issue with the logos, check the ‘Pass Through’ opacity setting on each frame and ensure they’re all set to 100%. Sometimes the opacity changes accidentally during adjustments. Let me know if that resolves it!

@Chaotic_Good94 17 күн бұрын

@@design_with_mahsa heya thank you so much for yr prompt reply ya, I think it was just a performance issue of my laptop T.T its good now lol thanks ya

@design_with_mahsa 17 күн бұрын

@@Chaotic_Good94 happy to hear that

@onyxtechnologyx 3 ай бұрын

Thanks for this Video. I made it

@design_with_mahsa 3 ай бұрын

Glad it helped!

@joacopiey 4 ай бұрын

Excellent, just one question, is there or do you use any page to download those brand logos? and if not, what should I look for on the internet to download them? Thank you and you won a subscriber.

@design_with_mahsa 4 ай бұрын

Thank you so much for subscribing! I really appreciate your support. To answer your question, I usually search for each brand’s logo individually. For example, I’ll type something like “Amazon logo PNG” into a search engine. Make sure to look for PNG files if you want the logos with a transparent background. I hope this helps, and feel free to reach out if you have any more questions!

@donnabidar308 9 ай бұрын

Fantastic! can't wait to see more!

@design_with_mahsa 9 ай бұрын

Happy to see this🌹thanks for sharing your feedback

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

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

@design_with_mahsa 7 ай бұрын

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 6 ай бұрын

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

@jorgejuanorozco2497 5 ай бұрын

Thanks., i didi at the end :)

@design_with_mahsa 5 ай бұрын

Happy to hear that ;)

@zhinopiroz1194 4 ай бұрын

thank you so much

@design_with_mahsa 4 ай бұрын

Thank you too!

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

Wow , that is just great

@design_with_mahsa 7 ай бұрын

Thanks

@ShankarNagarajan2444 6 ай бұрын

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 5 ай бұрын

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

@ShankarNagarajan2444 5 ай бұрын

@@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 5 ай бұрын

@@ShankarNagarajan2444 thank u it worked

@shristis8795 Ай бұрын

Sorry but i really don't understand😢 can someone help me@@ShankarNagarajan2444

@rahmadhika8631 4 ай бұрын

thankss, nice video. how to make more slower movement?

@design_with_mahsa 4 ай бұрын

Thank you for sharing your feedback. I have explained the speed adjustment in this video: kzbin.info/www/bejne/jJCklWyQhcZois0si=Xa0xykbJgSSVg70U

@remanentearcaico Ай бұрын

genia te amoo

@design_with_mahsa Ай бұрын

gracias!

@shreeramkishoremullapudi 16 күн бұрын

where do we take that logos

@design_with_mahsa 16 күн бұрын

You can easily search for them on Google. For example, type ‘Spotify logo PNG’ and download one with a transparent background. Then, simply drag and drop it into Figma. You can watch this video kzbin.info/www/bejne/nny3q3mZrLSnmdksi=We8pmE4CBVvtjsBr&t=18 for more details.

@shreeramkishoremullapudi 16 күн бұрын

@@design_with_mahsa thank you so much

@landianina7938 3 ай бұрын

thank you! Is there anyway to make it scroll slower than 10 000 ms? That's waaaay faster than what i need, but it won't let me input a higher number :(

@design_with_mahsa 3 ай бұрын

Yeah, Figma doesn’t let you set more than 1000ms. What you can do to adjust the speed is to shift two logos at a time instead of waiting to move all the logos until you reach the second set. It’s hard to explain in comments, but this video might help. Just replace the images with logos: kzbin.info/www/bejne/jJCklWyQhcZois0si=0XS8cY2FamVMzJgo

@rika69420 Ай бұрын

thanks alot

@design_with_mahsa Ай бұрын

Thank you for sharing your feedback

@Classicyu4 8 ай бұрын

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

@design_with_mahsa 8 ай бұрын

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 7 ай бұрын

Same happened with me

@dotuidesign 3 ай бұрын

Please, I want the logos to flow in reverse, what should I do?

@design_with_mahsa 3 ай бұрын

Thank you for sharing your feedback. I explained it in this video kzbin.info/www/bejne/jJCklWyQhcZois0si=0XS8cY2FamVMzJgo

@LizzLizzX33 4 ай бұрын

Heyhey, is there any possibility to slow down the scroll animation?

@design_with_mahsa 4 ай бұрын

Hi Lizz! I have explained the speed adjustment in this video: kzbin.info/www/bejne/jJCklWyQhcZois0si=Xa0xykbJgSSVg70U

@MystogunTM 3 ай бұрын

I Love YOUUUUU

@RockDeborah666 7 ай бұрын

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!! :)

@design_with_mahsa 7 ай бұрын

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 7 ай бұрын

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

@design_with_mahsa 4 ай бұрын

Hey, I have found a new way to adjust the scroll speed and explained it in this video kzbin.info/www/bejne/jJCklWyQhcZois0si=FEIaLcck51550we8

@billfoley891 Ай бұрын

How can I make it scroll slower?

@design_with_mahsa Ай бұрын

You can watch this video for speed adjustment kzbin.info/www/bejne/nny3q3mZrLSnmdksi=nj4WbdyjrrTP1Y4G

@amaloboudalamoudi786 6 ай бұрын

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?

@design_with_mahsa 6 ай бұрын

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.

@maryammasoumirad 9 ай бұрын

Very useful video. Please post more content.

@design_with_mahsa 9 ай бұрын

Sure. Thanks for sharing your feedback 🌹

@gauravgiri6081 7 күн бұрын

where's the component set option in new UI ?

@design_with_mahsa 6 күн бұрын

The Components Set in the new Figma UI (UI3) can be found by opening the dropdown menu next to the ‘Create Component’ button at the top right of the Properties panel. There, you’ll find the Components menu, which includes the Components Set.

@gauravgiri6081 6 күн бұрын

@@design_with_mahsa thank you so much

@GayathriGayathri-m5p 4 ай бұрын

use full thank you

@design_with_mahsa 4 ай бұрын

Happy to hear that

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

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

@design_with_mahsa 6 ай бұрын

Thank you

@olaosebikangbemisola1554 21 күн бұрын

How can I reduce the speed

@design_with_mahsa 21 күн бұрын

You can watch this video for adjusting the speed: kzbin.info/www/bejne/nny3q3mZrLSnmdksi=ojWTxfgeBklRjIew

@glyriks9377 2 ай бұрын

How can i reduce the speed

@design_with_mahsa 2 ай бұрын

I have explained the speed adjustment in this video kzbin.info/www/bejne/nny3q3mZrLSnmdksi=xgv76efFmUMZVk6L

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

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

@design_with_mahsa 9 ай бұрын

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

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

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

@design_with_mahsa 8 ай бұрын

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

@multiplexofmasters6270 4 ай бұрын

Thank you 🥹

@design_with_mahsa 4 ай бұрын

🌹

@FatimaSagheer-ep5yo 17 күн бұрын

in prototype its not showing its invisible why?

@design_with_mahsa 16 күн бұрын

I’m not sure I fully understand your question. Could you explain it in more detail?

@parijataraul375 7 ай бұрын

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

@samhkh229 6 ай бұрын

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

@vlogs0484 13 күн бұрын

CAN YOU MAKE A VIDEO TO EXPORT IT \

@giulianabelardo6907 7 ай бұрын

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

@design_with_mahsa 2 ай бұрын

@amanpaul5689 6 ай бұрын

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

@design_with_mahsa 6 ай бұрын

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.

@design_with_mahsa 4 ай бұрын

Hey, I have found a new way to adjust the scroll speed and explained it in this video kzbin.info/www/bejne/jJCklWyQhcZois0si=FEIaLcck51550we8

@nelsonogugua8742 5 ай бұрын

how can I slow it down?

@design_with_mahsa 5 ай бұрын

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: kzbin.info/www/bejne/jJCklWyQhcZois0

@design_with_mahsa 4 ай бұрын

Hey, I have found a new way to adjust the scroll speed and explained it in this video kzbin.info/www/bejne/jJCklWyQhcZois0si=FEIaLcck51550we8

@alvinoh8010 6 ай бұрын

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

@jegadeshrs5667 3 ай бұрын

Did you get a solution?

@codesign4230 7 ай бұрын

Easy to understand tanx

@design_with_mahsa 7 ай бұрын

Happy to hear that

@zahrafarzaneh8402 9 ай бұрын

👍🏻👍🏻❤

@beezeebee777 4 ай бұрын

not working :(

@design_with_mahsa 4 ай бұрын

You can watch this video, this one has more details kzbin.info/www/bejne/jJCklWyQhcZois0si=AvSXW4n4F9Ybdeno

@life-os3qm 3 ай бұрын

Sis this was not worked i do exactly but i dont understood wts wrong

@design_with_mahsa 3 ай бұрын

Sorry to hear that! You can watch this video kzbin.info/www/bejne/jJCklWyQhcZois0si=3D1sM2nqFLwMC6dg this one has more details. You can simply use your logos instead of the images.