Figma Parallax Image Animation Using Smart Animate - 📎 With Practice File

Поділитися
Вставка
  • Опубліковано 28 гру 2024

КОМЕНТАРІ • 134

  • @udayrajsathe
    @udayrajsathe  4 роки тому +2

    Figma Practice file link
    www.figma.com/community/file/894229815956029720

    • @mehboobulhaq4337
      @mehboobulhaq4337 3 роки тому +1

      How does you use effect on text can you plz tell

  • @ashfinamundambra5634
    @ashfinamundambra5634 5 місяців тому

    thank you for giving this files🥰🥰🥰

  • @playpiano2264
    @playpiano2264 2 роки тому

    Congrats Uday on your new job at Google! btw expecting more interaction design videos on your channel.
    : )

  • @ofuashulammite359
    @ofuashulammite359 3 роки тому +1

    I cant tell you how grateful I am, I had always been intrigued by the beautiful animations you make them so easy to understand, thank you.

  • @annabelding5380
    @annabelding5380 2 роки тому

    THANK YOU SO MUCH

  • @adityabhagwat3352
    @adityabhagwat3352 2 роки тому

    tum bahutt mast kaam krta uadayraj bhai !

  • @nisheethranjan1188
    @nisheethranjan1188 2 роки тому

    Subscribed bro! Awesome tutorial 😀

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      Thanks Nisheeth. Stay tuned for more 🤘😎

  • @guardianangel1337
    @guardianangel1337 3 роки тому +1

    awesome stuff, I like the paste of the video. You managed to keep it short while still explaining everything

  • @fradiasmi607
    @fradiasmi607 2 роки тому

    That's simple to understand yet wonderful result! Keep it up bro!

  • @blackwinstech
    @blackwinstech 3 роки тому +2

    Really a great tutorial for parallax image scrolling. Until I watch this, I thought it was so difficult to do many prototype links but u made it so simple and productive way to do more things! thanks a lot, buddy

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Glad it helped! 😄 Stay tuned for more.

  • @gameart5778
    @gameart5778 2 роки тому

    wow. its so cool man

  • @Irfan_Shaikh35
    @Irfan_Shaikh35 3 роки тому

    dude you have solved my big problem. I was about to shift to Framer and then I saw this. Keep up the great work 👍🏼

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Great to hear that! Figma is simply amazing tool 😎
      Keep watching :D

  • @BiggerWallets
    @BiggerWallets 3 роки тому

    Dude.. This is looking awesome.. Congrats..

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Glad to know that you liked it 🤟😎

  • @federicomatteoverde8636
    @federicomatteoverde8636 2 роки тому

    great tutorial man. straight to the point, thanks!

  • @vipulsuthar3796
    @vipulsuthar3796 2 роки тому

    Thank You so muchhhh ⭐⭐⭐⭐

  • @clwdk1
    @clwdk1 4 роки тому +8

    Another great video. If I have one piece of feedback it would be to drop the background music. I don't think you need it to be honest. Looking forward to the next one!

    • @udayrajsathe
      @udayrajsathe  4 роки тому

      Hey, thanks for feedback. I’ll keep that in mind 😊

  • @any-snazalac
    @any-snazalac 3 роки тому

    Great!!! Thank you for these amazing tutorial!

  • @juhichoubey4984
    @juhichoubey4984 3 роки тому

    awesome video thanks for sharing ...looking forward to learning a lot from you.

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Thanks Juhi. Stay tuned for more🤞🏽

  • @doniscoming
    @doniscoming 2 роки тому

    Super neat! I'll be definately showing off some parallax skills in my next designs! :D Thx!

  • @alevcopur
    @alevcopur 3 роки тому

    Good job appreciate your tutorial

  • @inarshia
    @inarshia Рік тому

    thanks my man

  • @muskata1
    @muskata1 3 роки тому

    Great tutorial. Thanks!

  • @ramazanguler6066
    @ramazanguler6066 3 роки тому

    Short and best lesson. Thank you

  • @nishimayekar2701
    @nishimayekar2701 3 роки тому

    It was nicely explained!!

  • @sriramnavin4975
    @sriramnavin4975 4 роки тому

    I wish This guy has 1m + subscribers...Dope work✌️❤️

    • @udayrajsathe
      @udayrajsathe  4 роки тому +1

      Wow!!! I'm flattered 😊
      Thank you for kind words Sriram 🙏

    • @sriramnavin4975
      @sriramnavin4975 4 роки тому

      @@udayrajsathe Welcome brother❤️😀

  • @dhineshvm2184
    @dhineshvm2184 4 роки тому

    Congratulations ! Awesome buddy

  • @duygukzl3707
    @duygukzl3707 3 роки тому

    Its great bro!

  • @wildtraveler8855
    @wildtraveler8855 3 роки тому

    Great content @Udayraj!

  • @abbysatya
    @abbysatya 2 роки тому

    keep it up mate

  • @HaiNguyen-tg5nk
    @HaiNguyen-tg5nk 3 роки тому

    thank you very much

  • @truptijamdade1574
    @truptijamdade1574 3 роки тому

    This is sooo amazing.....Thank u

  • @sachiupasani4195
    @sachiupasani4195 Рік тому

    Helpful video

  • @CovenantZechariah
    @CovenantZechariah 10 місяців тому

    Thank you for the explanation. But I have problem please, I am not getting the animation part when I prototype. Also the subtitle and title are not giving the same animation as yours, please help.

  • @mads4720
    @mads4720 4 роки тому

    Love your work! I have newly subscribed to your channel and love every video..very creative!

    • @udayrajsathe
      @udayrajsathe  4 роки тому

      Hey Thanks 😊
      What would you like to see next?

    • @mads4720
      @mads4720 3 роки тому

      @@udayrajsathe Can you pls help to advise wireframing options in Figma. I have seen there are many options but not sure how to use them.

  • @amandacarvalho8438
    @amandacarvalho8438 4 роки тому

    Its amazing! Thanks for it!

  • @rezmaeeey
    @rezmaeeey 4 роки тому +1

    I love this, thanks for sharing mate! looking forward for more awesome tips in figma!

    • @udayrajsathe
      @udayrajsathe  4 роки тому

      Thanks a ton 😊
      What do you want to see next? Anything in mind?

    • @rezmaeeey
      @rezmaeeey 4 роки тому

      @@udayrajsathe how about figma best practices, like naming components, variants, and design hacks also what do you recommend beginners to do with working on a design team or developer team using figma. Does that sound interesting to you? lmk! Thanks bhai!
      I have subscribed since I the first 30sec of your vid, keep doing it! It's Amazing! keepsafe!

    • @udayrajsathe
      @udayrajsathe  4 роки тому

      Wow. Excellent suggestions. Added it upcoming topics list 👍🏼.

  • @rammaduthuri
    @rammaduthuri 3 роки тому

    Beautiful

  • @almusaedtaxconsultancy2321
    @almusaedtaxconsultancy2321 2 роки тому +1

    this video is very good for learning new things.but i just want to tell you sir please explain little bit slowly slowly .

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      Noted. I'm always trying to improve my content.

  • @the_wonderwaffle
    @the_wonderwaffle 2 роки тому

    hello! awesome tutorial, can you explain please about the custom smart animate custom settings please?

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      Yes, sure. Added to my todo. Stay tuned 😎

  • @Hutututu
    @Hutututu 3 роки тому +1

    Nice stuff man, loved the tutorial, Can you make a "Horizontal Side Scrolling Parallax Website" Tutorial please.

  • @bharatjain5472
    @bharatjain5472 4 роки тому

    Great work...keep doing🙌🙌🙌🙌

  • @loguegika
    @loguegika 4 роки тому

    Cool, thankyou broo

    • @udayrajsathe
      @udayrajsathe  4 роки тому +1

      You’re welcome. Please stay tuned for more videos 😊😃

  • @ishitaamod5109
    @ishitaamod5109 2 роки тому

    can you do tha same in reactjs or provided some similar video?

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      I can’t code in reactjs but I’m sure it’s doable

  • @catagna7273
    @catagna7273 3 роки тому

    You deserve more subs!

  • @franceslim9561
    @franceslim9561 2 роки тому

    Great tutorial! Can you please share more videos on how to achieve another parallax pattern?

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      Can you share some examples with me? I can try and recreate them in Figma ✌

  • @OzbegimMarketing
    @OzbegimMarketing 3 роки тому

    super thanks

  • @bharatjain5472
    @bharatjain5472 4 роки тому +1

    Can we prototype keyboard navigation (tab, shift+tab)in figma??...if yes can u make a video on that???

  • @1980rajashree
    @1980rajashree 4 роки тому

    Just one feedback from me. I am a new figma learner. So can you please slow down a bit. Sometimes I feel you go too fast ( I know to manage time) but it kind of gets difficult to catch up. Rest, you a big saviour for us. Thankyou so much for the videos.

    • @udayrajsathe
      @udayrajsathe  4 роки тому

      Thanks Rajashree 😀
      I have received few more suggestions about the speed. I'll keep that in mind. Next time.

    • @1980rajashree
      @1980rajashree 4 роки тому

      @@udayrajsathe thankyou so much

  • @thaliaputri521
    @thaliaputri521 3 роки тому

    hello, can i ask you something? so basically i want to make landing page with video background but the video was covering the page button. can you help me? thankyou

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Sure. Would love to help. Please connect with me on LinkedIn or Insta and we can take it ahead

  • @ShakilKhan-dk5ww
    @ShakilKhan-dk5ww 4 роки тому

    love it

  • @TechieWorld1
    @TechieWorld1 4 роки тому

    Very nice video

    • @udayrajsathe
      @udayrajsathe  4 роки тому +1

      Thanks Praharsh for encouraging me.

  • @alanbiju4714
    @alanbiju4714 4 роки тому

    Keep going

  • @georgeleeve
    @georgeleeve 2 роки тому

    Great and succinct tutorial, paired with a Figma file not buried in self-promoting site registrations. Thank you for that.
    Quick question though, is this effect achievable "on scroll" instead of "on click"? To my limited knowledge, it isn't within Figma, but maybe it can be implemented later on in development?

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      It can be developed as 'on scroll' but Figma doesn't have that. So I used on click :)

  • @FerdinandG-J
    @FerdinandG-J 3 роки тому

    How do you linking home links?

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      Didn't get your question? Is it resolved already?

  • @supisarak.941
    @supisarak.941 3 роки тому +1

    Hey there! Thanks for this video! It would be so great if you could do it step-by-step for a beginner. It was too fast so I paused and repeated it dozen of times. That would be so helpful!

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Thanks for the feedback. I received the similar requests on this. Will definitely improve in the newer videos. 😊

  • @dareytemy
    @dareytemy 3 роки тому

    This is awesome.
    Is it possible to do a scroll kinda animation, such that when I scroll down the page, it's indicated in the Nav bar that this is the section I am.
    Like If I have a landing page with home, about us and our services in the Nav bar, and I scroll down the page to the our services section, then the nav bar indicates that I'm in the our services section.
    I hope you understand my question.

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

      I covered it in this tutorial > ua-cam.com/video/_Fm16MkcVzM/v-deo.html
      It's slightly more advanced than what you said 🤗
      I hope this is helpful.

    • @dareytemy
      @dareytemy 3 роки тому

      @@udayrajsathe Got it. Thanks!

  • @nishantsingh9600
    @nishantsingh9600 2 роки тому

    How to do with scroll?

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      On scroll trigger isn't available yet in Figma

  • @chan-xs6lu
    @chan-xs6lu 2 роки тому

    you are explaining so complicated we can understand like that bro

  • @estimata5905
    @estimata5905 3 роки тому

    Shift + arrow won't work. What should I do?

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      Sorry for late reply. Is your problem resolved already?
      If not, ping me on Linkedin or Insta. Would love to help.

  • @maraclan8196
    @maraclan8196 3 роки тому

    I'm totally blowed! That's crazy

  • @sgatwmusic
    @sgatwmusic 2 роки тому

    i follow step by step why doesnt work huhu

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      Is this resolved? We have to be very careful about layer, naming and their positions

  • @bylummy985
    @bylummy985 3 роки тому

    Vey helpful video but the final part was way too fast. I didn't get it at all. Please help

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

      I would love to help. Can you get in touch with me on LinkedIn or Insta?

    • @bylummy985
      @bylummy985 3 роки тому

      @@udayrajsathe sure. What’s your insta?

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      @@bylummy985 udayraj.sathe

  • @tarun0499
    @tarun0499 2 роки тому

    Mine wasnt working properly it waz just fading away

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      May be a layering / Smart animate issue. Is it resolved already?

    • @tarun0499
      @tarun0499 2 роки тому +1

      @@udayrajsathe yeah i managed somehow

  • @Ralphsanzio
    @Ralphsanzio 3 роки тому +1

    Next time, remove track sound behind, it is difficult to concentrate...

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      Thanks for suggestion. I'll definitely improve next time 😀

  • @RealMehedi
    @RealMehedi 3 роки тому

    Guruji

  • @dududu5788
    @dududu5788 4 роки тому

    6:00-end u explain to damn fast

    • @udayrajsathe
      @udayrajsathe  4 роки тому

      Oops!
      I fast forwarded that section to save some time. Seems like a bad decision 😅 I'll improve this next time 👍🏼
      In that section, I am mainly modifying the position of content for Smart Animate to work and changing styling of active tabs on the top.
      I hope it was helpful for you to some extent 🤞🏼

    • @dududu5788
      @dududu5788 4 роки тому

      @@udayrajsathe the tutorial is good , i can follow the step until minute 6:00 only

  • @KalyaniTalks
    @KalyaniTalks 3 роки тому

    Please explain slowly 😅

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

      Sure. I’ll try to improve in my next videos 😅

  • @aldymuhamadradhya7478
    @aldymuhamadradhya7478 3 роки тому

    To fast bro, so hard to keep up

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      I'm still learning editing :) Thanks for the feedback 🤘