Figma interactive components | Image Carousel animation tutorial | Hover animation

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

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

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

    Such a great video for someone new to Figma like me! Was super easy to then go and adapt it to look and function how I wanted :) Thanks!

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

      Thank a lot Jordan for this amazing feedback! I really appreciate it 🔥 and happy to know it was helpful! 🙂

  • @milkastojakovic6483
    @milkastojakovic6483 19 дней назад

    I'm so glad that you chose to show us the carousel and hover button in the same video, thank you so much! I have a question, how do you make the animation so smooth? I did the Ease out 500ms, but the scrolling looks kinda stiff :/ but everything else besides that works fine.

    • @YarivBE
      @YarivBE  19 дней назад +1

      Thanks a lot for your great feedback! I highly appreciate it 😊🔥HAppy to know it was helpful.
      As for your question - i guess that the right structure, using "smart animate" as the animation type (maybe thats the issue?) and the right duration (the "ms") should lead you to the same result on the tutorial.
      Let me know if you need further help with this :)

    • @milkastojakovic6483
      @milkastojakovic6483 19 дней назад +1

      @@YarivBE Thank you so much for the fast reply! I just checked and I put it everything like you did in a video. I changed ms to 300 and it is faster, but still kinda stiff, not as smooth like yours :/ I guess it has something to do with my design.

    • @YarivBE
      @YarivBE  18 дней назад

      @@milkastojakovic6483
      Ok, I understand - In order for me to understand better what going in you animation, share me a link to the file to yariv.be1@gmail.com and i'll see whats going there :)
      You are most welcome!

  • @ginaraduski8184
    @ginaraduski8184 2 года назад

    Thank you, Yariv! That was awesome

    • @YarivBE
      @YarivBE  2 года назад

      Thank you so much Gina for the amazing feedback! I really appreciate it ⚡😊

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

    thank you so much for awesome tutorial..it works great👏

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

      Thank a lot for this great feedback! I highly appreciate it and happy to know it helps and works 🙂🔥

  • @SpSveti
    @SpSveti 2 года назад +1

    מגניב בטירוף
    תודה רבה!!!

    • @YarivBE
      @YarivBE  2 года назад

      תודה רבה על הפידבק סבטה! שמחתי שאהבת ✌️🙂

  • @YemiAkanbi-e6d
    @YemiAkanbi-e6d Год назад

    your video is really helpful thank you !

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

      Thank you so much for the great feedback! I highly appreciate it 🙂🔥 Hair to know it was helpful :)

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

    really helpful, thanks

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

      Your are m most welcome and thanks a lot for your great feedback! I really appreciate it 🙂🔥

  • @ismaildhainy2644
    @ismaildhainy2644 2 года назад +1

    thank you man thats what i needed great video 👍🏻

    • @YarivBE
      @YarivBE  2 года назад +1

      You are most welcome my friend! Happy to know it did the job 😊✌ Thanks a lot for the great feedback!

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

    Thank you so much!!! your videos are so helpful and easy to understand

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

      Thanks you so much for the wonderful feedback Rithika! I really appreciate it! Thanks you for supporting the channel ⚡🙂

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

    thank for your help 👍

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

      You are most welcome! And thanks a lot for the great feedback! I highly appreciate it 🙂🔥

  • @jesamegbe1579
    @jesamegbe1579 2 года назад

    Thank you very much, this has been so helpful

    • @YarivBE
      @YarivBE  2 года назад

      You are most welcome! Thank you so much for the great feedback 🔥

  • @kevmutua8
    @kevmutua8 2 года назад

    thank you!

    • @YarivBE
      @YarivBE  2 года назад

      Thank you so much for great feedback Kevin! I highly appreciate it ✌⚡

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

    Thank u so much !!!!!

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

      Your are most welcome Dahana! Hairy your liked it and thank a lot for the great feedback! 🙂🔥

  • @emanfatima5801
    @emanfatima5801 2 года назад

    thankyou soo much

    • @YarivBE
      @YarivBE  2 года назад

      You are most welcome eman! Thsnks a lot for your great feedback 🙂 It is most appreciated ⚡

  • @saritamon911
    @saritamon911 2 года назад

    גם את האלמנט הזה ניסיתי ועשיתי בזכותך!

    • @YarivBE
      @YarivBE  2 года назад

      איזה כיף לדעת 🙂 תודה רבה על הפידבק המקסים! 🔥

  • @mohdmehdirizvi1287
    @mohdmehdirizvi1287 2 года назад +1

    But sir it didnt work on main page(frame) plz help me out

    • @YarivBE
      @YarivBE  2 года назад

      Hello there Mohd :) Can you try to explain to me what didnt work out for you? Its a bit difficult for me to understand like that where did it go wrong... We will work it out - dont worry - i just need to understand better what went wrong.
      Plz, as a first step, try the tutorial again, see that you go over it step by step - let me know whats the situation after you try again 🙂

    • @mohdmehdirizvi1287
      @mohdmehdirizvi1287 2 года назад +1

      @@YarivBE sir I make all the frame and prototypes all those frames and it work also but whenever I put it on my website main frame page it didn’t work sir

    • @YarivBE
      @YarivBE  2 года назад

      @@mohdmehdirizvi1287
      Ok - i understand the situation. Can you plz share the file with me? i'll take a look there and see what went wrong.
      Share it to this email -
      yariv.be1@gmail.com
      Lets sort it out there :)

    • @mohdmehdirizvi1287
      @mohdmehdirizvi1287 2 года назад

      @@YarivBE ok

    • @mohdmehdirizvi1287
      @mohdmehdirizvi1287 2 года назад +1

      @@YarivBE sir I just send it , did you got it ?

  • @Well.Luiz55
    @Well.Luiz55 Год назад

    Muito Obrigado, amigo.

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

      You are most welcome my friend :) Thanks for the great feedback! I really appreciate it 🙂🤚

  • @stefanroxana6793
    @stefanroxana6793 2 года назад

    Hi, this is very helpfull but I was wondering, if i have like 100 images that needs scrolling, I have to do the same thing for all of them? Is there a more simple solution? 😀

    • @YarivBE
      @YarivBE  2 года назад

      Hi Roxana :) and thanks a lot for your great feedback! I really appreciate it 🙂⚡
      To your question:
      1. The main idea in prototyping is that we demonstrate the behavior of an element, in this case the image carousel. You show a few times how it scrolls - thats it, the behavior is understood if it happens on 3 images or a 100. The developers will definitely understand that - be sure on it :) Nobody (never ever) will do a prototype like this for a 100 images :)
      2. UX wise, it is definitely not recommended to do a carousel for a 100 images - up to 20 or a bit more, it can still be ok and make sense - more than that, a "see all" at the the end of this carousel or below the carousel will lead to a page with all the images - again, UX wise it makes more sense.
      3. You can also create an infinite scroll, but again, up to around 20 or a bit more, it can still make sense.
      Hope the answer makes it more clear - please feel free to aske further if needed 🙂

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

      ​@@YarivBEYou are absolutely right. This is prototyping, not developing the actual website. No need to include all the content.