Really simple Parallax Animation Using Smart Animate (Figma)

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ธ.ค. 2024

ความคิดเห็น • 104

  • @PrashantKumar-ou9wt
    @PrashantKumar-ou9wt 3 ปีที่แล้ว +15

    A simple move yet so interactive and amazing effect! Just stunning

  • @andredataviz
    @andredataviz 2 หลายเดือนก่อน

    Amazing man, its beatifull!!!

  • @shesoldmychicken7241
    @shesoldmychicken7241 2 ปีที่แล้ว +5

    OMG this is exactly what I've been looking for months! Thank you!

  • @AMDesignAndDev
    @AMDesignAndDev  ปีที่แล้ว

    Hey guys, I've launched a Paid Figma Noob to Pro course that can help you take your Design and Figma skills to the next level!
    You can access it here: asaad-mahmood-s-school.teachable.com/p/figma-noob-to-pro
    My subscribers and viewers can get a 50% discount by using the voucher "AMSUBSCRIBER".

  • @AMDesignAndDev
    @AMDesignAndDev  2 ปีที่แล้ว

    Be sure to subscribe and hit the notification icon! It really helps the channel grow and motivates me to keep on investing on the channel.

  • @Sachinguptafilms
    @Sachinguptafilms 2 หลายเดือนก่อน

    Simple and perfect ❤

  • @anamar3901
    @anamar3901 2 ปีที่แล้ว +3

    love your tutorials! best channel on figma, for me

  • @sw9554
    @sw9554 2 ปีที่แล้ว +4

    Hey amazing stuff! Thank you for sharing ❤️

  • @citizenx3801
    @citizenx3801 2 ปีที่แล้ว +1

    Great Job. Wow! I'm subscribing.

  • @saravjeetsandhu3531
    @saravjeetsandhu3531 2 ปีที่แล้ว

    Amazing video brother

  • @sonagevorgyan3918
    @sonagevorgyan3918 2 ปีที่แล้ว +1

    Just WOW. At last I know how to do it. Thanks a loooooot

  • @shubhamchopade5577
    @shubhamchopade5577 2 ปีที่แล้ว

    You are the best bro🙏🙏🙏🙏🙏

  • @Cleventina
    @Cleventina 2 ปีที่แล้ว +2

    Nice work! Thank you for tutorial ❤️🙂

  • @aimelise
    @aimelise 2 ปีที่แล้ว

    Nice job! You are super talented. Thanks for the video.

  • @IntheBellyofaWhale
    @IntheBellyofaWhale 2 ปีที่แล้ว

    Amazing video🤝

  • @XiaSiyi
    @XiaSiyi 2 ปีที่แล้ว +3

    Great teaching! But may I ask why your second frame is not the same size as the first, but it has no effect in the show?

  • @silverwings8486
    @silverwings8486 3 ปีที่แล้ว +1

    Beautiful work

  • @sungrg8766
    @sungrg8766 11 หลายเดือนก่อน

    Hello, Can you also put a tutorial on how to swipe back up please. If it's already done, please drop me a link to the video. Btw absolutely loved your design.

  • @luizsilveira4066
    @luizsilveira4066 2 ปีที่แล้ว

    Wow. Great job.

  • @AttackoftheAsian
    @AttackoftheAsian 2 ปีที่แล้ว +2

    I really wish figma has a “on scroll” trigger or better yet “while scrolling” trigger

  • @shortvidsyt859
    @shortvidsyt859 2 ปีที่แล้ว

    Cool video

  • @Trina18
    @Trina18 2 ปีที่แล้ว

    Beautiful 🤩

  • @umutavci
    @umutavci 3 ปีที่แล้ว +1

    Amazing mate, thanks for your time to explain

  • @mirsdoodles
    @mirsdoodles ปีที่แล้ว

    Nice video, I love it! After following up your vid, I just want this to be scrolled back to the top. Can you tell me how&where to link in?

  • @victoriankem6120
    @victoriankem6120 2 ปีที่แล้ว +1

    Nice and amazing, please reduce your speed. Thanks

  • @adied7725
    @adied7725 ปีที่แล้ว

    super informative easy to understand and no waffling...thanks you got your self another subscriber.
    How i can animate a whole paragraph of text in a hero section?, please ...to animate in then type all paragraph and then disappear ?, i have seen and know how to animate one word at a time but for sentences i dont find anything in figam or your tube...thanks again for yourhelp or pointers, please

  • @ЛераЯрошенко-м7с
    @ЛераЯрошенко-м7с 2 ปีที่แล้ว

    Сool! Thank you, very helpful!

  • @AgUzodinma
    @AgUzodinma ปีที่แล้ว

    I've missed this Dante
    May the Lord strengthen and help you Dante ❤

  • @muhdhaziq.s1608
    @muhdhaziq.s1608 2 ปีที่แล้ว

    amazing tutorial..

  • @UyenNguyen-ou3zz
    @UyenNguyen-ou3zz 11 หลายเดือนก่อน

    Thank youuu🎉

  • @moritzsteinke514
    @moritzsteinke514 ปีที่แล้ว

    Hey, first if all thanks for the great video! Do you know if I can translate this animator stuff into jetpack compose if I wanna creat an app?

  • @ravipanwar7442
    @ravipanwar7442 2 ปีที่แล้ว

    amazing

  • @creativedesignstudio-ankita
    @creativedesignstudio-ankita 3 ปีที่แล้ว +1

    Nice 👍

  • @akatsukinoh7660
    @akatsukinoh7660 2 ปีที่แล้ว

    why are you so awesome

  • @DandydelSur
    @DandydelSur ปีที่แล้ว

    How can I do that effect but with a scroll down with the mouse?

  • @jum_py
    @jum_py ปีที่แล้ว

    It can be directly exported to code?

  • @agungages
    @agungages 11 หลายเดือนก่อน

    Can it be responsive with parallax?... I'm newb

  • @samsmedia5640
    @samsmedia5640 3 ปีที่แล้ว +1

    This is really good
    How to add figma prototype animation in landing page or web pages?

    • @AMDesignAndDev
      @AMDesignAndDev  3 ปีที่แล้ว +1

      Thanks, you can't as an svg or anything, you can create a movie and do that, or include it as an embed code, but it wouldn't be in html/css form.

  • @FilipBO-t4x
    @FilipBO-t4x ปีที่แล้ว +1

    Please link from the photo or keywords to search such pictures

    • @AMDesignAndDev
      @AMDesignAndDev  ปีที่แล้ว

      You can find them on Freepik, I have added a search result:
      www.freepik.com/search?format=search&query=vector%20landscape

    • @FilipBO-t4x
      @FilipBO-t4x ปีที่แล้ว

      @@AMDesignAndDev Thanks!

  • @michelleolashile4082
    @michelleolashile4082 ปีที่แล้ว

    this is really gold. thank you so much but how do we scroll back to the top after scrolling down... what interaction should we use?

    • @AMDesignAndDev
      @AMDesignAndDev  ปีที่แล้ว +1

      You can add any animation you want, mouse enter, mouse out, click, drag etc.
      Note that figma is not building full fledged prototypes, things like these are only for presentation purposes.

    • @michelleolashile4082
      @michelleolashile4082 ปีที่แล้ว

      @@AMDesignAndDev thank you

  • @zhenzhen4551
    @zhenzhen4551 3 ปีที่แล้ว +1

    Thanks for sharing!
    But what will happen is you scroll back up? will the hero still shows?

    • @AMDesignAndDev
      @AMDesignAndDev  2 ปีที่แล้ว

      Not right now because I haven’t linked it. But you can easily link it.

    • @simplefolding
      @simplefolding 2 ปีที่แล้ว

      Hi @@AMDesignAndDev Can we scroll back the frame #2 to #1 if we have 3 frame ?

  • @FilipBO-t4x
    @FilipBO-t4x ปีที่แล้ว

    how do you group select the elements from the photo?

  • @vincentkangethe1560
    @vincentkangethe1560 2 ปีที่แล้ว

    Really nice work
    Could you please share the two background images?
    Thanks

  • @allanfernandes829
    @allanfernandes829 ปีที่แล้ว

    Where did you the assets such as the background image etc.

  • @random_world88
    @random_world88 2 ปีที่แล้ว +2

    PLS try not to speed up the video , bcoz we might wana see how you work for better understanding

  • @MaggieKayy
    @MaggieKayy 2 ปีที่แล้ว

    I love this!! Is there a way this could work by just scrolling down with the mouse?

    • @AMDesignAndDev
      @AMDesignAndDev  2 ปีที่แล้ว

      Not in Figma at this point. We can add a on mouse enter event on the frame that can fake that effect though.

    • @MaggieKayy
      @MaggieKayy 2 ปีที่แล้ว

      @@AMDesignAndDev Thankyou, let me try that

    • @AMDesignAndDev
      @AMDesignAndDev  2 ปีที่แล้ว

      @@MaggieKayy If you want, I can do a video on that.

    • @evgeniyagenaeva7377
      @evgeniyagenaeva7377 2 ปีที่แล้ว

      @@AMDesignAndDev yes, please :) it would be super helpful

  • @karlodagi5602
    @karlodagi5602 2 ปีที่แล้ว

    looks amazing! I'm struggling with getting a click prototypes work on one of my buttons. The idea is when the button in the app is clicked on that the button will change the color but also open a overlay. Is that possible?

    • @MaggieKayy
      @MaggieKayy 2 ปีที่แล้ว +1

      You can only have one on click action for a button, so it will either change color or open the overlay

  • @faizan0_040
    @faizan0_040 3 ปีที่แล้ว +1

    5 🌟 boi

  • @gromhellscream5581
    @gromhellscream5581 ปีที่แล้ว

    I cannot unclip the mask and manually control the vectors of the image? Anyone can help?

  • @marianavida_
    @marianavida_ ปีที่แล้ว

    where I can get more of this type of illustration? someone heeelp me

  • @zakariacolor1905
    @zakariacolor1905 2 ปีที่แล้ว +1

    Can you please make this with code.
    Or if you have another similar video but made with code.
    Thank you.

  • @realmind6014
    @realmind6014 2 ปีที่แล้ว

    Thank you very much!
    it worked, but my text just appears, it doesn't move in like your intro text.
    how can I solve this? I want that my intro text move to the place it should be like yours and not that it just appears, hope you can understand what I mean

    • @realmind6014
      @realmind6014 2 ปีที่แล้ว

      Got it, I accidentally changed the size of the copied text, it has to be exact same thing or you won't get a fade in effect

  • @1deplatt
    @1deplatt 2 ปีที่แล้ว +1

    How about making it happen On Scroll?

    • @AMDesignAndDev
      @AMDesignAndDev  2 ปีที่แล้ว

      Not easy in Figma. Can be done in protopie or principle

  • @souravbarua2049
    @souravbarua2049 3 ปีที่แล้ว

    Nice! How you save this interaction into video to upload dribbble? Screen recorder?

    • @AMDesignAndDev
      @AMDesignAndDev  3 ปีที่แล้ว +1

      Yup.

    • @souravbarua2049
      @souravbarua2049 3 ปีที่แล้ว

      @@AMDesignAndDev which one?

    • @AMDesignAndDev
      @AMDesignAndDev  3 ปีที่แล้ว +1

      @@souravbarua2049 I just use QuickTime on Mac usually. It exports an mov file which I then convert to MP4 using an online converter.

    • @AMDesignAndDev
      @AMDesignAndDev  3 ปีที่แล้ว +1

      @@souravbarua2049 I sometimes also use screen flow, but its speed and you don’t really need it for this task.

  • @enriqueruiz320
    @enriqueruiz320 2 ปีที่แล้ว +1

    🤯

  • @emanfatima5801
    @emanfatima5801 2 ปีที่แล้ว

    whenever i prototype the after delay option is grey.....plz tell me any solution

    • @AMDesignAndDev
      @AMDesignAndDev  2 ปีที่แล้ว

      Share your file, I can have a look.

  • @skylarveruca
    @skylarveruca 10 หลายเดือนก่อน

    0:06

  • @anadibhusanpatra6938
    @anadibhusanpatra6938 2 ปีที่แล้ว +1

    Can you send this figma file please 🙏🏽

  • @micolzampieri9445
    @micolzampieri9445 2 ปีที่แล้ว

    what about don't click on scroll down ma rly scroll with the mouse on the page?

    • @AMDesignAndDev
      @AMDesignAndDev  2 ปีที่แล้ว

      Scrolling up + down in and having the effect go back and forth will not be possible.

    • @AMDesignAndDev
      @AMDesignAndDev  2 ปีที่แล้ว

      Figma does not have a scroll based interaction control. You can do that with Protopie!

  • @sonnyjuraa
    @sonnyjuraa 2 ปีที่แล้ว

    It`s been an amazing master class. Thanks brother. I tried to follow the same steps as you did. But the thing is smart animate is kinda working weird. It`s kinda adding objects which I didn`t even use on my frame, I checked all my layers. And also, my animations are not as smooth as yours. Is is with the computer or any other settings to make the animations smoother like yours. Would be great if you can help out with my design for just 2 minutes. How can I contact you

    • @AMDesignAndDev
      @AMDesignAndDev  2 ปีที่แล้ว +1

      Please isolate the problem, and just create a small file and share it here

    • @simplefolding
      @simplefolding 2 ปีที่แล้ว

      The layer must be the same name in every frame

  • @priyanshukatuwal
    @priyanshukatuwal 2 ปีที่แล้ว +1

    is figma free?

  • @nlsmarketing
    @nlsmarketing ปีที่แล้ว

    you are doing for yourself.......or explaining it to people?

  • @fayechan5257
    @fayechan5257 2 ปีที่แล้ว

    good tutorial but u neeed to slow down , as a beginner i can;t follow on some steps that you're doing

    • @AMDesignAndDev
      @AMDesignAndDev  2 ปีที่แล้ว

      Got it, thanks a lot for the feedback Faye, will try to keep that in mind!

  • @devroopdas
    @devroopdas 2 ปีที่แล้ว

    please share figma file

  • @landwirtschaft2116
    @landwirtschaft2116 ปีที่แล้ว

    Basically.

  • @sebastianpendragon
    @sebastianpendragon ปีที่แล้ว

    Shame parallax isn't free, because I can't buy that plugin.

  • @ДмитрийТомащук-к5й
    @ДмитрийТомащук-к5й 2 ปีที่แล้ว +4

    Thank you for your video, your work, it will help me learn and develop in a new profession for me🙏😌 no war! Stop Russian Aggression! live free Ukraine 🇺🇦 🫡

    • @ДмитрийТомащук-к5й
      @ДмитрийТомащук-к5й 2 ปีที่แล้ว +2

      if I don’t die from a Russian missile attack, this is not a joke, about 40 minutes ago there were 3 missile attacks on my city, so far you can’t find such news on the Internet, but tomorrow I’m sure you can already check and verify my words. the city of Zaporozhye. God bless us and our army. this afternoon I studied figma, and met with friends to drink coffee, and at night I hide because of powerful explosions, car alarms, still have not turned off after the explosions. this is the reality of Ukraine. if everything goes well overnight, during the day I will try to repeat your work in figma .. because I need a new job, at a computer, and with the ability to work remotely