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

Поделиться
HTML-код
  • Опубликовано: 5 окт 2024

Комментарии • 141

  • @natka34764
    @natka34764 7 месяцев назад +5

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

    • @pixxelex
      @pixxelex  7 месяцев назад +1

      You're welcome!

  • @kevyn.patrick
    @kevyn.patrick 4 месяца назад +1

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

    • @pixxelex
      @pixxelex  4 месяца назад

      Great to hear!

  • @shalboni_das
    @shalboni_das 10 месяцев назад +3

    Best tutorial on endless autoscroll ✨

    • @pixxelex
      @pixxelex  10 месяцев назад

      Thank you!

  • @MeckLords
    @MeckLords 4 месяца назад

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

    • @pixxelex
      @pixxelex  4 месяца назад

      You're welcome!

  • @CurrentlyReading14
    @CurrentlyReading14 6 месяцев назад +3

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

    • @pixxelex
      @pixxelex  6 месяцев назад

      Totally agree!

  • @disenadorwebfavorito
    @disenadorwebfavorito 8 месяцев назад +1

    AWESOME EVEN IN JAN 2024 WORKS perfectly

    • @pixxelex
      @pixxelex  8 месяцев назад +1

      Glad it was helpful!

  • @Ankgitha-Tasktel
    @Ankgitha-Tasktel 2 месяца назад

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

    • @pixxelex
      @pixxelex  2 месяца назад

      You're welcome!

  • @elahehyousefi4562
    @elahehyousefi4562 8 месяцев назад +2

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

    • @pixxelex
      @pixxelex  8 месяцев назад

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

  • @MosesAdegunle
    @MosesAdegunle 20 дней назад

    Really helpful. Thank you!

    • @pixxelex
      @pixxelex  20 дней назад

      You're welcome!

  • @murphykyt
    @murphykyt 5 месяцев назад

    You make it very clear. Thanks

    • @pixxelex
      @pixxelex  5 месяцев назад

      Glad it was helpful!

  • @greensnek
    @greensnek Год назад +4

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

  • @aichurokzhumgalbekkyzy3576
    @aichurokzhumgalbekkyzy3576 4 месяца назад

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

    • @pixxelex
      @pixxelex  4 месяца назад

      You're very welcome!

  • @Santi-jt2jd
    @Santi-jt2jd 4 месяца назад

    Best tutorial, thank you!

    • @pixxelex
      @pixxelex  4 месяца назад

      Glad it was helpful!

  • @chineduokoye2521
    @chineduokoye2521 3 месяца назад

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

  • @akshbusines._
    @akshbusines._ 2 месяца назад

    It’s working ❤

  • @Lon3lyMuffin
    @Lon3lyMuffin 11 месяцев назад +1

    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
      @pixxelex  10 месяцев назад

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

  • @thedejirichards
    @thedejirichards 8 месяцев назад

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

    • @pixxelex
      @pixxelex  8 месяцев назад

      Glad to hear that!

  • @majheanubhav
    @majheanubhav 11 месяцев назад +6

    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
      @pixxelex  11 месяцев назад +1

      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: ruclips.net/video/B_b4ZT0FHbU/видео.html
      V2: ruclips.net/video/wNnYO0qv2bk/видео.html

  • @blainebacchiocchi
    @blainebacchiocchi Год назад +2

    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
      @pixxelex  Год назад

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

    • @BlazingTyphlosion
      @BlazingTyphlosion 9 месяцев назад

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

  • @sarahwillett5768
    @sarahwillett5768 3 месяца назад

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

    • @pixxelex
      @pixxelex  3 месяца назад

      Unfortunately Figma doesn't support this.

  • @valeriaanabeldeprado3122
    @valeriaanabeldeprado3122 6 месяцев назад

    Thank u!! best tutorial

    • @pixxelex
      @pixxelex  6 месяцев назад

      You're welcome!

  • @Alice-dd6jr
    @Alice-dd6jr 5 месяцев назад

    I succeed ! thanks !

  • @ghorbanmahtabi2891
    @ghorbanmahtabi2891 6 месяцев назад +1

    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?

  • @DionnaAlexis-lh4zc
    @DionnaAlexis-lh4zc 4 месяца назад

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

  • @khushaliadhiya9469
    @khushaliadhiya9469 4 месяца назад

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

    • @pixxelex
      @pixxelex  4 месяца назад +1

      Yeah, it works on the text and I also created a tutorial on it.
      Check it out here: ruclips.net/video/QYkdzTGy7uc/видео.html

    • @khushaliadhiya9469
      @khushaliadhiya9469 4 месяца назад

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

  • @LawlietKM
    @LawlietKM 3 месяца назад

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

  • @ThatIkoroduTeenager
    @ThatIkoroduTeenager 7 месяцев назад +1

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

  • @임수연-q6k
    @임수연-q6k 2 месяца назад

    thank you so much~~

    • @pixxelex
      @pixxelex  2 месяца назад

      You're welcome

  • @life-os3qm
    @life-os3qm 19 дней назад

    I need help bro its not working i do exactly

  • @warxdonquixote
    @warxdonquixote 3 месяца назад

    good video. thanks

    • @pixxelex
      @pixxelex  3 месяца назад

      Glad it helped

  • @pedromarques9792
    @pedromarques9792 7 месяцев назад

    Love it! Thanks!

    • @pixxelex
      @pixxelex  7 месяцев назад

      You are so welcome!

  • @DisguisedPhoenix
    @DisguisedPhoenix 9 месяцев назад +1

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

    • @pixxelex
      @pixxelex  9 месяцев назад

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

    • @pixxelex
      @pixxelex  8 месяцев назад

      Tutorial Updated.
      Check here: ruclips.net/video/n4lbfl5rXsw/видео.html

  • @PriscilaMonteiro
    @PriscilaMonteiro Год назад

    Thank you so much for this! 🙌

  • @BlazinglyPassionateHuman
    @BlazinglyPassionateHuman 4 месяца назад

    Thanks man

    • @pixxelex
      @pixxelex  4 месяца назад

      You're welcome!

  • @loomonda18
    @loomonda18 Год назад +2

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

    • @pixxelex
      @pixxelex  Год назад

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

    • @abeeraziz8237
      @abeeraziz8237 Год назад

      +1 🥲 i dont know why?

    • @pixxelex
      @pixxelex  Год назад

      ​@@abeeraziz8237 If you are still facing the issue then you can check out my recent tutorial on same topic.
      Check Here: ruclips.net/video/B_b4ZT0FHbU/видео.html

  • @wendelanthuny
    @wendelanthuny Год назад +1

    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
      @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. :)

  • @geronelo1435
    @geronelo1435 4 месяца назад

    Espectacular,

  • @solchee8983
    @solchee8983 10 месяцев назад

    Thank you!

    • @pixxelex
      @pixxelex  10 месяцев назад

      You're welcome!

  • @Classicyu4
    @Classicyu4 5 месяцев назад

    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
      @pixxelex  5 месяцев назад

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

    • @Jake-cn1vb
      @Jake-cn1vb 20 дней назад

      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.

  • @AlexPunto401
    @AlexPunto401 7 месяцев назад

    tnx, i love it

    • @pixxelex
      @pixxelex  7 месяцев назад

      I'm glad you like it

  • @44asha12
    @44asha12 3 месяца назад

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

    • @pixxelex
      @pixxelex  3 месяца назад

      You can use arrow keys to move the elements

  • @rohithg3512
    @rohithg3512 7 месяцев назад

    Awesome 😊

    • @pixxelex
      @pixxelex  7 месяцев назад +1

      Thanks 🤗

  • @dajanadimova9025
    @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
      @pixxelex  Месяц назад

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

  • @vaxi8d3s96
    @vaxi8d3s96 Год назад

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

    • @pixxelex
      @pixxelex  Год назад +1

      Unfortunately, Figma doesn't allow us.

  • @An-qm6he
    @An-qm6he 7 месяцев назад

    Thaaaaaaaanks!🐸

  • @cesiamontenegro6989
    @cesiamontenegro6989 10 месяцев назад

    Awesome!

  • @aswin.design
    @aswin.design Год назад

    Good work man..

  • @chalisa_k
    @chalisa_k Год назад

    Thank you

  • @AlTaylor-u5s
    @AlTaylor-u5s Год назад +1

    Tried a few of these tuts and all I'm getting is a fade rather than a scroll. New figma updates?

    • @pixxelex
      @pixxelex  Год назад

      Nope, Nothing to do with Figma updates. I think you are doing something wrong in placing the duplicate cards. So make sure to watch the video carefully and follow the instructions. You'll get the results for sure.

    • @quadriadewale
      @quadriadewale Год назад

      Same here, the cards are moving too fast and not "scrolling" as intended

    • @pixxelex
      @pixxelex  Год назад +1

      Please follow the video properly and make sure to place the duplicate cards in the position of the original cards which will allow a loop to happen.

    • @quadriadewale
      @quadriadewale Год назад

      @@pixxelex Thank you, I'll try again. Keep up the amazing work 👍

    • @pixxelex
      @pixxelex  Год назад

      @@quadriadewale Sure❤

  • @prafulgupta_02
    @prafulgupta_02 11 месяцев назад

    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
      @pixxelex  11 месяцев назад +1

      Yeah we can, will make a tutorial on it.

    • @pixxelex
      @pixxelex  11 месяцев назад

      Check Now
      Tutorial: ruclips.net/video/tLZPEEAvqUA/видео.html
      Hope, this video will be helpful to you.

  • @kimluis7722
    @kimluis7722 11 месяцев назад

    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
      @pixxelex  11 месяцев назад

      Unfortunately, this is not possible in Figma.

  • @aghighbaghaei5678
    @aghighbaghaei5678 10 месяцев назад

    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
      @pixxelex  10 месяцев назад +1

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

  • @oulijahbruno9562
    @oulijahbruno9562 6 месяцев назад

    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!

  • @Sindragosa-v6y
    @Sindragosa-v6y 11 месяцев назад

    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
      @pixxelex  11 месяцев назад

      Sorry, I didn't understand your question

    • @Sindragosa-v6y
      @Sindragosa-v6y 11 месяцев назад

      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
      @pixxelex  11 месяцев назад

      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: ruclips.net/video/B_b4ZT0FHbU/видео.html
      Hope I answered your question.🙂

    • @Sindragosa-v6y
      @Sindragosa-v6y 11 месяцев назад

      @@pixxelex Yes, thank you very much

  • @Alfiandirgaa
    @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
      @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
      @Alfiandirgaa Год назад

      @@pixxelex cool man! thanks

  • @nehakudle6860
    @nehakudle6860 8 месяцев назад

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

    • @pixxelex
      @pixxelex  8 месяцев назад

      Try restarting the prototype

    • @nehakudle6860
      @nehakudle6860 8 месяцев назад

      @@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

  • @MehediHasan-ij5mr
    @MehediHasan-ij5mr 10 месяцев назад

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

    • @pixxelex
      @pixxelex  10 месяцев назад

      Yeah you can do it on wordpress

  • @shairashinozuka2150
    @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
      @pixxelex  Год назад

      Yeah definitely, you can change the images later.

  • @JasperTulp
    @JasperTulp 3 месяца назад

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

    • @pixxelex
      @pixxelex  3 месяца назад

      Please restart the prototype once again.

  • @travelandfestivals
    @travelandfestivals 10 месяцев назад

    mine bounces in the opposite direction once it reaches the end

    • @pixxelex
      @pixxelex  10 месяцев назад

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

  • @valentinocuchallo219
    @valentinocuchallo219 2 месяца назад

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

    • @valentinocuchallo219
      @valentinocuchallo219 2 месяца назад

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

    • @valentinocuchallo219
      @valentinocuchallo219 2 месяца назад

      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
      @valentinocuchallo219 2 месяца назад

      S.O.S

    • @pixxelex
      @pixxelex  2 месяца назад

      Please check the prototype settings once

  • @jaykaralkar
    @jaykaralkar 8 месяцев назад

    mine is going in recverse

    • @pixxelex
      @pixxelex  8 месяцев назад

      Maybe you are doing it like this 😅
      Link: ruclips.net/video/n4lbfl5rXsw/видео.html

  • @julesxjoules
    @julesxjoules 11 месяцев назад

    can you export it and turn it into a gif?

    • @pixxelex
      @pixxelex  11 месяцев назад +1

      Yeah you can turn it into GIF using "Lottie Files" plugin

    • @julesxjoules
      @julesxjoules 11 месяцев назад

      thank you @@pixxelex