Really simple Parallax Animation Using Smart Animate (Figma)

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

КОМЕНТАРІ • 104

  • @andredataviz
    @andredataviz 3 місяці тому

    Amazing man, its beatifull!!!

  • @PrashantKumar-ou9wt
    @PrashantKumar-ou9wt 3 роки тому +15

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

  • @Sachinguptafilms
    @Sachinguptafilms 3 місяці тому

    Simple and perfect ❤

  • @shesoldmychicken7241
    @shesoldmychicken7241 2 роки тому +5

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

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

    love your tutorials! best channel on figma, for me

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

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

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

    Great Job. Wow! I'm subscribing.

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

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

  • @sw9554
    @sw9554 3 роки тому +4

    Hey amazing stuff! Thank you for sharing ❤️

  • @AttackoftheAsian
    @AttackoftheAsian 2 роки тому +2

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

  • @Cleventina
    @Cleventina 2 роки тому +2

    Nice work! Thank you for tutorial ❤️🙂

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

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

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

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

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

    You are the best bro🙏🙏🙏🙏🙏

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

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

    Amazing video brother

  • @UyenNguyen-ou3zz
    @UyenNguyen-ou3zz Рік тому

    Thank youuu🎉

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

    Amazing video🤝

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

    Wow. Great job.

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

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

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

    Beautiful work

  • @muhdhaziq.s1608
    @muhdhaziq.s1608 2 роки тому

    amazing tutorial..

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

    why are you so awesome

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

    amazing

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

    Amazing mate, thanks for your time to explain

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

    Nice and amazing, please reduce your speed. Thanks

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

    Cool video

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

    Beautiful 🤩

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

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

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

  • @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".

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

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

  • @ЛераЯрошенко-м7с
    @ЛераЯрошенко-м7с 2 роки тому

    Сool! Thank you, very helpful!

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

    🤯

  • @creativedesignstudio-ankita
    @creativedesignstudio-ankita 3 роки тому +1

    Nice 👍

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

    5 🌟 boi

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

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

    It can be directly exported to code?

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

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

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

      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 ?

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

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

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

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

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

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

  • @FilipBO-t4x
    @FilipBO-t4x Рік тому

    how do you group select the elements from the photo?

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

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

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

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

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

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

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

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

  • @skylarveruca
    @skylarveruca 11 місяців тому

    0:06

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

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

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

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

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

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

    Can you send this figma file please 🙏🏽

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

    is figma free?

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

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

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

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

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

    Basically.

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

    please share figma file

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