How to Create Endless Auto Scrolling Animation in Figma | Figma Tutorial

[@natka34764]

First tutorial I could have learnt everything about auto scrolling! Thank you so much.

[@pixxelex]

You're welcome!

[@shalboni_das]

Best tutorial on endless autoscroll ✨

[@pixxelex]

Thank you!

[@disenadorwebfavorito]

AWESOME EVEN IN JAN 2024 WORKS perfectly

[@pixxelex]

Glad it was helpful!

[@MeckLords]

I was afraid this would not be able to be made on Figma, but it was! Thanks a lot

[@pixxelex]

You're welcome!

[@SaminaAmir-t1l]

Best best best best best thank you so much ❤❤❤❤

[@pixxelex]

Most welcome 😊

[@valeriaanabeldeprado3122]

Thank u!! best tutorial

[@pixxelex]

You're welcome!

[@CurrentlyReading14]

Great tutorial! 🫡 Would love if Figma gave more than 10000ms max so it could auto scroll at a slower pace. 👀

[@pixxelex]

Totally agree!

[@Ankgitha-Tasktel]

Worked very well, Thank you soo much!!!🤞

[@pixxelex]

You're welcome!

[@aichurokzhumgalbekkyzy3576]

Amazing tutorial! So easy and usefull. Thank you so much

[@pixxelex]

You're very welcome!

[@greensnek]

Awesome tutorial. Figma is not as hard as I imagined it to be

[@pixxelex]

Thanks mate

[@pedromarques9792]

Love it! Thanks!

[@pixxelex]

You are so welcome!

[@murphykyt]

You make it very clear. Thanks

[@pixxelex]

Glad it was helpful!

[@MosesAdegunle]

Really helpful. Thank you!

[@pixxelex]

You're welcome!

[@Santi-jt2jd]

Best tutorial, thank you!

[@pixxelex]

Glad it was helpful!

[@thedejirichards]

Thanks a lot for this, it really helpe me with my project

[@pixxelex]

Glad to hear that!

[@rohithg3512]

Awesome 😊

[@pixxelex]

Thanks 🤗

[@kevyn.patrick]

It worked so well! Tysm. I'm using it in my portfolio site, and it really rocks!

[@pixxelex]

Great to hear!

[@Lon3lyMuffin]

Thank you for the tutorial! I"m looking to make a wallpaper of sorts, and I want the scroll effect to appear like it's moving diagonally instead of horizontally. What would be the best way to do that with this method?

[@pixxelex]

I guess in Figma you can't make it diagonally.

[@aswin.design]

Good work man..

[@pixxelex]

Thank you so much..

[@ghorbanmahtabi2891]

Hi, thanks for your valuable training. In endless auto scrolling, I want to do this action: when take the mouse on the endless auto scrolling, it be stop? Can one help me to do it?

[@snowycrunch016]

did you find any info about it?

[@AlexPunto401]

tnx, i love it

[@pixxelex]

I'm glad you like it

[@Alice-dd6jr]

I succeed ! thanks !

[@pixxelex]

Great!

[@elahehyousefi4562]

so much effort good tutorial but I'd rather you explain orally as well! It'd be much more helpful:)

[@pixxelex]

Thank you for the suggestion. Will try to add voice in future videos.

[@cesiamontenegro6989]

Awesome!

[@pixxelex]

Thanks!

[@DisguisedPhoenix]

Can you do a tutorial that starts from right to left?

[@pixxelex]

Sure, will do a tutorial on it and update you.

[@pixxelex]

Tutorial Updated. Check here: kzbin.info/www/bejne/pGXPk5miateLqdk

[@warxdonquixote]

good video. thanks

[@pixxelex]

Glad it helped

[@DionnaAlexis-lh4zc]

which interaction detail do you press when it is for a phone and people are scrolling with their finger? Mouse up?

[@PriscilaMonteiro]

Thank you so much for this! 🙌

[@pixxelex]

You're so welcome!

[@sarahwillett5768]

thank you for this tutorial, Is it possible to slow down the scroll?

[@pixxelex]

Unfortunately Figma doesn't support this.

[@wendelanthuny]

Hi there, awesome tutorial, thanks! It works perfectly in a single artboard frame. But, I was trying to using this loop interaction in a bigger flow with other interactions between the artboard frames and the animation kinda ghosting the state changes. Any idea of how to solve this?

[@pixxelex]

Hi, first of all, thank you for watching this tutorial. To answer your question, I suggest first checking their positions, to create a perfect loop you should match their positions and make sure to link the last frame to the first frame. I hope this answer will be able to help you. :)

[@임수연-q6k]

thank you so much~~

[@pixxelex]

You're welcome

[@blainebacchiocchi]

I was successful thanks! Is there a way to slow this down? I wanted to use it for a scrolling Card section but the max 10000ms is way too fast.

[@pixxelex]

Sorry, unfortunately we can't make more slow it down.

[@BlazingTyphlosion]

Don't forget that Figma is a prototyping and designing tool and NOT a full functioning web development environment.

[@geronelo1435]

Espectacular,

[@ThatIkoroduTeenager]

i loved this but i have a question in a situation where i want the elemnts scolling to be clickable what do it do

[@snowycrunch016]

did you find any info about it?

[@chineduokoye2521]

Thank you so much but how do we move the second frame to be the first frame without our mouse

[@BlazinglyPassionateHuman]

Thanks man

[@pixxelex]

You're welcome!

[@An-qm6he]

Thaaaaaaaanks!🐸

[@pixxelex]

Welcome!

[@solchee8983]

Thank you!

[@pixxelex]

You're welcome!

[@khushaliadhiya9469]

I learned from this video but I have a question - Does this scrolling work on Text as well?

[@pixxelex]

Yeah, it works on the text and I also created a tutorial on it. Check it out here: kzbin.info/www/bejne/h4rOla2KfN5qq8U

[@khushaliadhiya9469]

Yes - Thanks for the tutorial, it is helpful:) @@pixxelex

[@eeeeeeeeeee2]

how can I stop it while hovering over one of the pictures?

[@LawlietKM]

when trying to loop the second frame, it doesn't let me pick after delay

[@nyiwo]

hello, im wondering if you also have a tutorial with this endless auto scroll but theres a zoom effects when you hover your mouse to an image that is scrolling if theres none can you tell me how, thank you

[@pixxelex]

Unfortunately, this is not possible in Figma.

[@aghighbaghaei5678]

hello, what should I do if I want to add mouse enter/ mouse leave , so when the mouse enters it opens an overlay and when mouse leaves it continues the carousel

[@pixxelex]

Sorry, simultaneously we can't do multiple interactions in Figma

[@Classicyu4]

Hi Thanks a lot for the video! Meins went a bit strange, it goes to right side at first but then turn to left side at the end. It is not a Endless Auto Scrolling but back and forth. Do you have any Idea what goes wrong? Thanks for your help.

[@pixxelex]

It seems like something might have gone wrong. I would recommend checking the tutorial again to make sure everything is correct.

[@Jake-cn1vb]

I had the same issue. Make sure the interaction going from the second frame to the first has animation type set to instant, not smart animation.

[@Ahmed19163]

@@Jake-cn1vb saved me a lot of time thank you 🙏

[@Sindragosa-v6y]

please tell me, and the pictures in 2 frames, when we do the animation, should stand in the same places or move slightly to the side 😅

[@pixxelex]

Sorry, I didn't understand your question

[@Sindragosa-v6y]

Oh, sorry😓. When we make a copy of the frame and shift, should they have the same borders? It's just that in 1 frame I shift the picture by half, and in 2 I shift up to 2 of the same picture and set it in the same place. I've been reviewing your video many times and I can't figure out the problem@@pixxelex

[@pixxelex]

In 1st frame, move all the images a little bit and then duplicate the frame. Now in 2nd frame, you just need to move all the images to match the position of the images(The starting image should be the duplicate image) You can check my other tutorial on the same topic: kzbin.info/www/bejne/eJDFZY2KZat7mLc Hope I answered your question.🙂

[@Sindragosa-v6y]

@@pixxelex Yes, thank you very much

[@44asha12]

After duplicating for second frame you did small moment in first frame could please tell that how to move frame1

[@pixxelex]

You can use arrow keys to move the elements

[@loomonda18]

I did everything you did but when I click play to see it animate, nothing happens! :(

[@pixxelex]

Please check with the prototype settings properly. It should work.

[@abeeraziz8237]

+1 🥲 i dont know why?

[@pixxelex]

​@@abeeraziz8237 If you are still facing the issue then you can check out my recent tutorial on same topic. Check Here: kzbin.info/www/bejne/eJDFZY2KZat7mLc

[@shairashinozuka2150]

Hi, do you able to edit it? for example i want to create a carousel template that the images will always be changing overtime.

[@pixxelex]

Yeah definitely, you can change the images later.

[@Alfiandirgaa]

Hi Thanks for the tutorial, but what if I want to reverse the automatic scroll? like from right to left for the movement

[@pixxelex]

Yeah you can do that by using same process. You just need to arrange all the elements from right to left instead of left to right.

[@Alfiandirgaa]

@@pixxelex cool man! thanks

[@himanisharma2397]

@@Alfiandirgaa i think if you will put the exact same delay properties in second scroll as the first scroll...you may get the reverse effect.

[@prafulgupta_02]

I am using the same process for bigger cards (one card occupies the whole screen)and everything is fine BUT Is is possible that we can make the screen pause for 2 sec everytime a new card appears

[@pixxelex]

Yeah we can, will make a tutorial on it.

[@pixxelex]

Check Now Tutorial: kzbin.info/www/bejne/qn29gXh7dtuki6M Hope, this video will be helpful to you.

[@vaxi8d3s96]

thanks! Do you know why we cannot put number bigger than 10000ms? I tried but it goes back to 10,000ms

[@pixxelex]

Unfortunately, Figma doesn't allow us.

[@MehediHasan-ij5mr]

Can i import this kind of animation on wordpress through html css

[@pixxelex]

Yeah you can do it on wordpress

[@life-os3qm]

I need help bro its not working i do exactly

[@majheanubhav]

Its not working at all, followed all the steps showed in the video. Instead of this it is working with 3 variants. How it worked for you, if there are any hidden steps, kindly share here.. Thanks.

[@pixxelex]

There is no hidden step. You must have done it wrong. it's working for others. You can check my other tutorials on the same topic. V1: kzbin.info/www/bejne/eJDFZY2KZat7mLc V2: kzbin.info/www/bejne/rX_RioJmpttlmM0

[@nehakudle6860]

I done successfully, but problem was when its working on only in flow mode while i am presenting its not working

[@pixxelex]

Try restarting the prototype

[@nehakudle6860]

@@pixxelex hey, yes I am done restarting several time.but didn't work. I was try with change after delay to hover effect aslo in second frame prototype replace smart animated place of instant And now working in present mode

[@dajanadimova9025]

the only thing that bothers me that the slide going too fast, and i tried to change na delay seconds, but doesnt help. Someone knows how to fix it?

[@pixxelex]

Unfortunately, Figma does not support to add more than 10000ms

[@chalisa_k]

Thank you

[@pixxelex]

Glad it helped you.

[@travelandfestivals]

mine bounces in the opposite direction once it reaches the end

[@pixxelex]

Check the prototype setting between the last frame and first frame and follow the tutorial properly

[@valentinocuchallo219]

It doesnt work for me, it doesnt move, only changes of colour :c

[@valentinocuchallo219]

Please somebody help me, im just about to being fired from my job. I only gain in pesos from argentina. HEEELP ME D:

[@valentinocuchallo219]

Nah i'm just kidding, i love my job. It's my favorite thing to do. In all my life i hadn't been this happy once man.

[@valentinocuchallo219]

S.O.S

[@pixxelex]

Please check the prototype settings once

[@oulijahbruno9562]

Strange, I'm sure I did everything correctly, but mine won't scroll at all. I even deleted the whole thing and tried again. EDIT: It started working after I reloaded Figma!

[@pixxelex]

👏

[@LéaCHIDAS]

When i did it for the the first time it works but I delete it because it wasn't well ajusted Now i restart but it didn't work at all 😰 However I did exactly as in the video

[@pixxelex]

Please check the tutorial once again, it should work.

[@LéaCHIDAS]

​@@pixxelex Thanks a lot I already check it was a little mistake it works now 🙏

[@JasperTulp]

I did all the things you do, but still doesn't work.

[@pixxelex]

Please restart the prototype once again.

[@jaykaralkar]

mine is going in recverse

[@pixxelex]

Maybe you are doing it like this 😅 Link: kzbin.info/www/bejne/pGXPk5miateLqdk

[@Alexis-to7lf]

I didn't get it at all