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
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 ...
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.
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!
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
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! 🎥✨
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.
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?
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: ua-cam.com/video/hKTzFcwOtcw/v-deo.html"
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.
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!
@@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..
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
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!
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.
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
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: ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=n-wQ6a3TpYtcqOhJ
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!! :)
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.
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 :(
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: ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=0XS8cY2FamVMzJgo
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 ua-cam.com/video/hKTzFcwOtcw/v-deo.htmlsi=We8pmE4CBVvtjsBr&t=18 for more details.
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!
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?
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.
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
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: ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.html
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.
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.
Sorry to hear that! You can watch this video ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=3D1sM2nqFLwMC6dg this one has more details. You can simply use your logos instead of the images.
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!
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
same. so easy to follow and very clear instructions~
I just wanted to say thank you for this helpful video!
Thank you for sharing your feedback 🌹
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 ...
Thank you! Your comment warms my heart.
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.
Glad it was helpful!
Hello do you mind being a mentor
mostly beautiful tutorial and underrated channel for web desinging and frontend
Thank you so much for the kind words! I’m glad you find the tutorials helpful
Amazing Tutorial 👏👏
This tutorial is helpful for beginners.
Happy to hear that.🌹
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!
Dear Abigail! Your comment warms my heart🌹I’m happy that you found it helpful. Thank you for sharing your feedback!
Your tutorials is very helpful I watched many others, but I couldn’t understand them as well as I understood yours
I’m happy to hear that, thank you for sharing your feedback.
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
I’m happy you found it helpful. Thanks for sharing your feedback.
Amazing 😍😍
Nice I just wanted to say thank you for this helpful video
I’m happy to hear that!
Easy to follow, very well explained and to the point.
Happy to hear that!
duuuuude thank you so much! it worked! you're a wizard
Glad it helped
very nice
Thanks
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! 🎥✨
Thanks for sharing your feedback. I’m glad that it’s helping you. 🌹
You explained everything very well and in detail. Thank you so much
Thank you for sharing your feedback 🌹
thans! so cool!
You’re welcome!
thank you. I always come back to this video lol
Happy to hear that!
I love the video! I like how smoothly and step-by-step you explained everything.
Thank you so much!❤
Thank you. I’m happy that it was helpful for you 🌹
This a exactly what I needed. Quick and to the point too. Thank you!
Happy to hear that. Thanks for sharing your feedback
This is the video I was looking for, thank you
Have to hear that😊
You saved me fr❤❤❤❤❤❤ love you bruhh
Your welcome 🌹🌹
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.
Thank you Amin! Your message warms my heart. 🙏🏻🌹
@@design_with_mahsa u have a business or a personal ig?
It was a very useful video with smooth instruction.Thanks a lot
I’m so happy that you find it useful. Thanks for your feedback.
Thank you so much Moonsa, your video really helped me!🌻
I’m glad that it was helpful, thanks for sharing your feedback
I watched it again and it helped me a lot thank you !
Happy to hear that!
so cool, so awesome!
Thnx and it was working perfectly 😊
Happy to hear that. Thanks for sharing your feedback
This was very helpful thank you for explanation ❤️❤️🙏🏻🙏🏻
Thanks for sharing your feedback 😊
Thank you so much for the video. It was very useful.
Glad it was helpful!
Thank you gir 👌👌🔥
You're so welcome!
Great video
Happy to hear that
Very helpful, thank you very much
Happy to hear that. Thanks for sharing your feedback
THANKYOU ITS WORKING
😘
Welcome 😊
Fantastic! can't wait to see more!
Happy to see this🌹thanks for sharing your feedback
Helpful, thank you
Thank you so much, your video was really helpful
Happy to hear that. Thanks for sharing your feedback
Thankyou so much..❤
Thank you Mohamed
thanks moonsa
Wow , that is just great
Thanks
Thank you!
You're welcome!
thanks
it is very helpful
Glad to hear that
Thanks it works❤
Happy to hear that🌹
It was so useful. Thank you for your awesome tutorial ❤
I’m glad you like it🌹
Can you assist me how can i select two frames in double click ?
Sorry, I didn’t understand your question.
genia te amoo
gracias!
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
Thank you
Thanks for this Video. I made it
Glad it helped!
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?
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: ua-cam.com/video/hKTzFcwOtcw/v-deo.html"
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.
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!
Thanks., i didi at the end :)
Happy to hear that ;)
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
Same problem. Can you pls tell me if u found any solution
@@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..
@@ShankarNagarajan2444 thank u it worked
Sorry but i really don't understand😢 can someone help me@@ShankarNagarajan2444
Very useful video. Please post more content.
Sure. Thanks for sharing your feedback 🌹
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
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!
@@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
@@Chaotic_Good94 happy to hear that
thanks alot
Thank you for sharing your feedback
I Love YOUUUUU
Is it possible to make an endless carousel , but in such a way that when you hover the mouse over a photo, it stops?
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.
@@design_with_mahsa thank you for the answer
@@design_with_mahsathanks for the answer, is it possible to achieve the same effect in Protopie?
Also to make it slower you can change the timing in the smart animate
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.
@@design_with_mahsa hi thanks in advance but which items can we add to make it slower? thanks again
use full thank you
Happy to hear that
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
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: ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=n-wQ6a3TpYtcqOhJ
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!! :)
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.
@@design_with_mahsa thank you so much!! I really appreciate it :)
Hey, I have found a new way to adjust the scroll speed and explained it in this video ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=FEIaLcck51550we8
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 :(
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: ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=0XS8cY2FamVMzJgo
where do we take that logos
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 ua-cam.com/video/hKTzFcwOtcw/v-deo.htmlsi=We8pmE4CBVvtjsBr&t=18
for more details.
@@design_with_mahsa thank you so much
How can I reduce the speed
You can watch this video for adjusting the speed: ua-cam.com/video/hKTzFcwOtcw/v-deo.htmlsi=ojWTxfgeBklRjIew
Thank you 🥹
🌹
thankss, nice video. how to make more slower movement?
Thank you for sharing your feedback.
I have explained the speed adjustment in this video: ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=Xa0xykbJgSSVg70U
Thx! I kind of meet the problem, that after it finish to the end, it goes backward. Could you help me with the problem?
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!
Same happened with me
Can I animate the texts with the same process?
Thank you for the video 😇
Yes, it has the same process.
Thanks for your feedback🌹
Please, I want the logos to flow in reverse, what should I do?
Thank you for sharing your feedback. I explained it in this video ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=0XS8cY2FamVMzJgo
Easy to understand tanx
Happy to hear that
Heyhey, is there any possibility to slow down the scroll animation?
Hi Lizz! I have explained the speed adjustment in this video: ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=Xa0xykbJgSSVg70U
How can I make it scroll slower?
You can watch this video for speed adjustment ua-cam.com/video/hKTzFcwOtcw/v-deo.htmlsi=nj4WbdyjrrTP1Y4G
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?
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.
Hey, Can you please help me with this auto scrolling in my web!
Really appreciate it.
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
in prototype its not showing its invisible why?
I’m not sure I fully understand your question. Could you explain it in more detail?
How can i reduce the speed
I have explained the speed adjustment in this video ua-cam.com/video/hKTzFcwOtcw/v-deo.htmlsi=xgv76efFmUMZVk6L
When I clip frame 2 it clip the align logos with the frame 1
Hey! I followed your steps, but my text didn't scrolling :( frustated.
Did you get a solution?
how can I slow it down?
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: ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.html
Hey, I have found a new way to adjust the scroll speed and explained it in this video ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=FEIaLcck51550we8
thank you so much
Thank you too!
Does anyone know how to make it stop when you hover?
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.
Hi how can I slow down the speed of the carousel?
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.
Hey, I have found a new way to adjust the scroll speed and explained it in this video ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=FEIaLcck51550we8
no idea why it didnt work on mine, did exactly the same steps, when play, not scrolling
not working :(
You can watch this video, this one has more details ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=AvSXW4n4F9Ybdeno
👍🏻👍🏻❤
Hi ,I cant please help me .I don’t scroll like you😢
Sis this was not worked i do exactly but i dont understood wts wrong
Sorry to hear that! You can watch this video ua-cam.com/video/V_Ad9ZPa5Tk/v-deo.htmlsi=3D1sM2nqFLwMC6dg this one has more details. You can simply use your logos instead of the images.
Still not working
Sorry to hear that. Maybe this video will help you; it has more details. ua-cam.com/video/hKTzFcwOtcw/v-deo.htmlsi=Fb3i9NSjEdI794ps
use your real voice plz
its creepy
It’s my real voice,but thanks for your feedback
Thank it's help me alot. Love you 🫶💕
Happy to hear that. Thanks for sharing your feedback